html中的css

css

（cascading style sheets，串联样式表，也叫层叠样式表）
在这里插入图片描述
css规范一般约定：
1.存放CSS样式文件的目录一般命名为style或css。
2.在项目初期，会把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，出网站性能的考虑会将不同的CSS文件整合到一个CSS文件中，这个文件一般命名为style.css或css.css。
3.推荐样式命名（见表）
4.在CSS中添加注释非常简单，它是以“/”开始，以“/”结尾。注释可以是单行，也可以是多行，并且可以出现在CSS代码的任何地方。一般将注释分为结构性注释和提示性注释。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>个人博客网站</title><style type="text/css">body {font-size: 11pt;} /*设置主体字体大小*//*设置区块宽度 600px、边框 1px 绿色虚线*/div {width: 780px; border: 1px green #00f;}/*设置 h3 标题的字体、颜色、对齐方式*/h3 {font-family: 黑体; font-size: 22pt; color: black; text-align: center;}h3.title {font-size: 18pt; font-weight: bold; color: #666; text-align: center;} /*设置 h3 的副标题*//*设置段落文字 11pt；黑色；文本缩进两个字符*/p {font-size: 11pt; color: black; text-indent: 2em;}p.img {text-align: center;} /*设置段落中的图像居中对齐*/p.author {color: blue; text-align: right;} /*设置段落中的作者文字蓝色、右对齐*/img {width: 200; height: 160; border: 1px solid; color: skyblue;} /*设置图像的宽、高、边框*/</style>
</head>
<body><div><h3>如何快速建立自己的</h3><h3 class="title">个人博客网站</h3><p class="img"><img src="images/blog.jpg"></p><p>各大博客门户网站相继关闭，做一个独立的个人博客网站是将来的趋势。越来越多的个人站长倾向于独立建站，那如何快速建立自己的个人博客网站呢？</p><p>个人博客应该简单、优雅、稳重、大气、低调，采用 HTML5+CSS3 设计，nav 导航实现鼠标悬停渐变显示英文标题的效果，banner 部分，选择大图作为背景，利用 CSS3 中的 animation 属性结合文字图片实现文字从左到右的渐变效果。</p><p class="author">发布：小江</p></div>
</body>
</html>

在 HTML 中，style 标签用于定义文档的样式信息，而 type 属性指定了样式表的类型。对于 CSS，这个类型通常是 text/css。

可用link键入外部的css文件

...
<link rel="stylesheet" href="外部样式表文件名.css" type="text/css">
...
</head>

导入外部样式表文件

<style type="text/css">@import url("外部样式表的文件名1.css");@import url("外部样式表的文件名2.css");/* 其他样式表的声明 */
</style>

（建议使用link）
css的两个主要特性

1.层叠

层叠（Cascade）是指CSS能够对同一个元素应用多个样式表。（如果有矛盾的样式，会遵循覆盖的原则）

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>多重样式表的层叠</title><style type="text/css">div { color: red; font-size: 12pt; }p { color: blue; }</style>
</head>
<body><div><!-- p元素里的内容会继承div定义的属性 --><p>这个段落的文字为蓝色 12号字</p></div>
</body>
</html>

【说明】显示结果表明“这个段落的文字为蓝色12号字”继承div属性，为12号字；而color属性则依照最后的定义，为蓝色。

2.继承

继承指的是特定的CSS属性可以从父元素向下传递到子元素。这种特性允许样式不仅应用于某个特定的元素，同时也应用于其后代，而后代所定义的新样式，却不会影响父样式。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>继承示例</title><style type="text/css">p {color: #00f; /* 定义文字颜色为蓝色 */text-decoration: underline; /* 增加下画线 */}p em { /* 为 p 元素中的 em 子元素定义样式 */font-size: 24px; /* 定义文字大小为 24px */color: #f00; /* 定义文字颜色为红色 */}</style>
</head>
<body><h3>CSS 基础</h3><p>CSS 是一组格式设置规则，用于控制 <em>Web</em> 网页的外观。</p><ul><li>表现和内容（结构）分离</li><li>易于维护和<em>改版</em></li><li>更好地控制页面布局</li></ul><ul><li>CSS 设计与编写原则</li></ul>
</body>
</html>

在这里插入图片描述

注意事项：
1.如果有多个单词要用引号
2.虽然最后一个属性值后面不需要加；但是最好记得加上
3.在每一行尽量都只描述一个属性
4.可以通过选择器的分组，让相同的选择器享受相同的分组
在这里插入图片描述

选择器（Selector）

也被称为选择符，CSS选择器用于指明样式对哪些元素生效。HTML中的所有元素都是通过不同的CSS选择器进行控制的。在CSS中，根据选择器的功能或作用范围，可以将选择器分为元素选择器、class类选择器、id选择器和伪类选择器等。
其中，通配符选择器也称全局选择器，其作用是定义网页中所有元素均使用同一种样式。在编写代码时，用“*”表示通配符选择符。
属性选择器：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>属性选择器示例</title><style type="text/css">img[alt] {border: 3px solid #00F;} /* 作用于任何带 alt 属性的 img 元素 */a[href][title] {font-weight: bold;} /* 作用于同时带 href 和 title 属性的 a 元素 */a[href="www.taobao.com"][title="淘宝"] {font-size: 18px;} /* 作用于地址指向 www.taobao.com 并且 title 为"淘宝"的 a 元素 */a[title~="baidu"] {color: red;}*[lang|="en"] {color: blue;}p[title^="my"] {color: yellow;}p[title$="Test"] {color: green;}p[title*="est"] {background-color: aqua;}</style>
</head>
<body><p><img src="images/tulip.jpg" alt="郁金香" width="200" height="120" /></p>
</body>
</html>

在这里插入图片描述
后代选择器，如：h3 em选择器，这是一个并集选择器，只会对h3里面的em生效
而父子选择器h3>em则是只会对h3下的直接子元素生效
相邻兄弟选择器则会对相邻的后一个“兄弟”进行修改
例子：

h3+p{color:red;}

这里会对p进行修改但是仅仅是一个p，
而通用兄弟选择器，会对之后的所有p作出修改：

h3～p{color:red;}

id选择器；使用特有id时要加“#”

格式为：E#idValue{property1:value1;property2:value2;...}

（用于为某id单独设置样式）
在这里插入图片描述

class选择器：

可以为指定类的html元素单独设计样式

id 选择器示例

CSS3 简介

CSS (Cascading Style Sheet，串联样式表，也叫层叠样式表)，简称为样式表，CSS 是用于定义如何显示 HTML 元素，控制网页样式并将样式与网页内容分离的一种标记性语言。

CSS3 语法基础

CSS 的基本语法由两部分组成，其格式为：

selector{property1: value1; property2: value2;...}

selector 被称为选择器，选择器决定了样式定义需要改变的 HTML 元素。property: value 被称为样式声明，有一条或多条样式时，用冒号隔开，以分号结束，包含在一对大括号“{}”内。


```dart
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>id 选择器示例</title><style type="text/css">#title {color: red;}#sub_title {background-color: aqua;}#p_content, #p_title strong {color: blue;}p {text-indent: 2em;}</style>
</head>
<body><h2 id="title">CSS3 简介</h2><p id="p_content">CSS (Cascading Style Sheet，串联样式表，也叫层叠样式表)，简称为样式表，CSS 是用于定义如何显示 HTML 元素，控制网页样式并将样式与网页内容分离的一种标记性语言。</p><h2 id="sub_title">CSS3 语法基础</h2><p>CSS 的基本语法由两部分组成，其格式为：</p><p id="p_title"><strong>selector{property1: value1; property2: value2;...}</strong></p><p>selector 被称为选择器，选择器决定了样式定义需要改变的 HTML 元素。property: value 被称为样式声明，有一条或多条样式时，用冒号隔开，以分号结束，包含在一对大括号“{}”内。</p>
</body>
</html>

伪类选择器：可以实现交互功能
在这里插入图片描述

<!DOCTYPE html>
<html>
<head><style type="text/css">a:link {color: blue;} /* 超链接单击之前是蓝色 */a:visited {color: red;} /* 超链接单击之后是红色 */a:hover {color: green; font-size: large; background-color: aqua;} /* 鼠标指针悬停时，绿色，较大的字体，背景是湖绿色 */a:active {color: black; background-color: blueviolet;} /* 按下鼠标按键不松手的时候，字体是黑色，背景是蓝紫色 */input:focus {background-color: yellow;} /* 输入框获得焦点时，背景色是黄色 */li:first-child {font-size: 22px; background-color: #00FFFF;} /* 列表的第一项元素字体是 22px，背景色是浅蓝色 */</style>
</head>
<body><p>应用最为广泛的锚点元素 a 的几种状态（未访问超链接状态、已访问超链接状态、鼠标指针悬停超链接状态和被激活超链接状态）:</p><a href="https://www.taobao.com/">淘宝</a><br /><a href="https://www.bilibili.com/">哔哩哔哩</a><form action="login" method="post">用户名: <input type="text" name="username" id="username" value="" /><br />密码: <input type="password" name="password" id="password" value="" /></form><div id=""><ul><li>咖啡</li><li>茶</li><li>可口可乐</li></ul><ol><li>面包</li><li>馍</li><li>汉堡</li></ol></div>
</body>
</html>

用于单独处于特殊状态的元素
伪元素选择器是CSS中的一种选择器，用于选择HTML元素的特定部分，而不是整个元素。它通常用于处理那些不是由HTML标签直接表示的内容，比如首行文字、首字母或者生成的内容等。
特点
• 创建虚拟元素：伪元素选择器会创建一个虚拟的元素，这个元素不在文档树中，但可以通过CSS进行样式控制。
• 语法：伪元素选择器以双冒号（::）开头，例如::before、::after等。不过，为了兼容旧版本浏览器，单冒号（:）的写法也被支持。
• 使用场景：常用于在元素的前后插入内容、修饰首行文字或首字母等。
常见的伪元素选择器
• ::before：在元素内容之前插入内容。
• ::after：在元素内容之后插入内容。
• ::first-line：选择元素的第一行内容。
• ::first-letter：选择元素的第一个字母。
示例
以下是一个使用::before和::after的示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div::before {content: "前缀：";color: red;}div::after {content: " 后缀";color: blue;}</style>
</head>
<body><div>这是主要内容</div>
</body>
</html>