摘要：句型基本句型规则由选择器和一个或多个声明两个主要部分组成。 句子名称 属性 属性值 属性 属性值 选择器 选择器用于描述一组元素的样式，也称为类选择器。 后代选择器也称为包含选择器，以空格分隔，子元素选择器只能选择属于某个元素的子元素的元素。
1 什么是CSS？
CSS一般称为CSS样式表或级联样式表（cascading stylesheet），
主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图像外观（宽度、高度、边框样式、边距等）以及页面的布局。
CSS在HTML的基础上提供了丰富的功能，如字体、颜色、背景控制和整体布局等，还可以针对不同的浏览器设置不同的样式。
2CSS句型 CSS基本句型
CSS 规则由两个主要部分组成：选择器和一个或多个声明。
每个声明由一个属性和一个值组成。 属性（property）是设置样式的属性，每个属性都有一个值，属性和值之间用逗号分隔。
比如 selector{property：value}
选择器通常是需要设置样式的 HTML 元素。
比如 h1{color:red; font-size:14px;} h1是选择器，color和font-size是属性，red和14px是值。
注意：
如果定义多个语句，则需要用分号分隔每个语句。 如：p{text-align:center;color:red}
如果值为多个短语，则需要在值后面添加冒号：例如：p{font-family: "sansserif";}
CSS 中间句模式
选择器分组
h1,h2,h3,h4,h5,h6 {
color: green;
}
继承及其问题：根据CSS，子元素继承父元素的属性。
body {
font-family: Verdana, sans-serif;
}
3 创建CSS
CSS 在三种情况下创建样式表：
内部样式表
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
div{width:200px; height:200px; border:1px solid red;}
内联样式（inline style）
外置式工作台（外链式）
样式优先级：内联样式 > 内部样式 > 外部样式
三种风格的区别：
样式表 优点 缺点 使用情况 控制范围 行内 书写方便 没有实现样式和结构相分离 较少 控制一个标签(少) 内部 部分结构和样式相分离 没有彻底分离 较多 控制一个页面(中) 外部 完全实现结构和样式相分离 需要引入 最多，推荐 控制整个站点(多)
4id选择器和类选择器ID选择器：
id选择器可以为标有特定id的HTML元素指定特定的样式，id属性就像身份证一样唯一。
HTML元素使用id属性来设置id选择器css列表，CSS中的id选择器是用“#”定义的。
注意：id 属性不能以数字开头。
语法：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器：
类选择器用于描述一组元素的样式，也称为类选择器。
class 可以在多个元素中使用，但一个元素也可以指定多个类名。
在 CSS 中，类选择器是用点“.”定义的。
同一类名的第一个字符不能使用数字。
语法：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
ID选择器和类（class）选择器的区别：
相同点：
可以应用于任何元素
不同之处：
ID选择器只能在文档中使用一次，而类选择器可以多次使用。
可以使用类选择器词表方法同时为一个元素设置多个样式（即一个元素可以指定多个类名），而ID只能指定一个。
5CSS元素选择器
最常见的CSS选择器是元素选择器，即标签选择器，它是HTML中最基本的元素选择器。
语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器最大的优点就是可以快速统一页面中同类型标签的样式。 同时这也是它的缺点，无法设计出差异化的款式。
6CSS背景（背景）
背景属性用于定义 HTML 元素的背景。
有五个 CSS 属性定义元素背景的效果：
背景颜色 背景颜色
背景图像 背景图像
背景重复背景图像设置水平或垂直平铺或不平铺
background-position 背景图片设置定位
背景附件背景图像设置固定或滚动
背景属性缩写：
body{
background:green url("images/fix.gif") no-repeat fixed 12px 24px;
}
当使用简写属性时，属性值的顺序依次为：
background-color --> background-image --> background-repeat --> background-attachment --> background-position
7CSS外观属性
CSS文本格式主要分为：文本颜色（颜色）、文本对齐方式、文本装饰、文本阴影、文本缩进、文本宽度、字宽、文本留白处理、文本转换。
文本对齐方式：text-align属性有四个值：left、center、right、justify（两端对齐）。 该属性默认值为自动。
文本装饰：text-decoration 属性用于设置或删除文本的装饰。
主要用于删除超链接的逗号，也可以使用其他值来设置文本的装饰。
text-decoration:overline，设置文本上划线。
text-decoration:line-through，将线条设置在文本的中间。
text-decoration:下划线，设置文本逗号。
文本阴影：文本阴影：xyshadowcolor；
其中 x 是水平阴影的倾斜值，
y 是垂直阴影的倾斜值，
Shadow 用于指定阴影的模糊值，即模糊效果的效果距离，不允许使用负值。
颜色指定阴影的颜色。 这个属性有两个作用，形成阴影和模糊主体。
文本缩进：用于指定第一行文本的缩进，允许为负值。 如果该值为正数，则第一行将向左缩进。
CSS表示为：text-indent: 2em，em是相对文本大小的单位css列表，1em是一种文本大小，2em是两种文本大小。
文本宽度：列的宽度，即文本行的高度。 如：line-height：22px；
字宽：letter-spacing和word-spacing属性都可以用来减少或减轻文本之间的间距，即字宽。
区别在于：
letter-spacing 属性设置字符宽度，而 word-spacing 属性设置短语宽度。
注意：
word-spacing属性对英文无效，所以在设置英文字宽时请使用letter-spacing属性。
letter-spacing 和 text-align:justify 是两个相互冲突的属性，不能同时使用；
text-align：justify是根据设置内容的长度手动调整字宽，使每行的宽度完全相等，达到两端对齐文字的效果。
而letter-spacing就是指定固定的字宽。
文本空白处理：white-space 属性指定如何处理元素中的空白。 默认值是正常的空白，浏览器将忽略它。
该属性也有 4 个值：
nowrap 文本不会换行，严格禁止换行，文本将继续在同一行上，直到遇到
标签。
前置空白会被浏览器保留，这些方法和HTML中的类似
标签，用于定义预格式文本。
pre-wrap 指定保留空白符序列，但是正常地进行换行。
pre-line 指定合并空白符序列，但是保留换行符，并允许自动换行。文本转换：text-transform 属性控制文本中的字母。
8 CSS字体 (font)
是用来指定在一个文本中的大写和小写字母，可用于将所有字句变成大写或小写字母，或每个单词的首字母大写。
text-transform:capitalize; 定义文本中的每个单词以大写字母开头。
text-transform:uppercase; 定义文本仅有大写字母。
text-transform:lowercase; 定义文本仅有小写字母。font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性。
简写顺序：
font-style(字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体)
注意，font-size 和 font-family 的值是必需的，否则无效。(1)是绝对或相对大小，可以使用px、em、%和em组合来设置。
使用px设置：通过像素设置文本大小是设置的整个页面。
使用em设置：1em等于当前的字体尺寸，比如设置的默认字体是12px，因此1em的默认大小就是12px。像素转换em：px/12 = em
使用%和em组合设置：在所有浏览器的解决方案中，设置 元素的默认字体大小是 100%，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
body{font-size:100%} p{font-size:2.5em; } /* 2.5*16=40px */使用%和em组合设置
(2)font-style属性主要用于指定粗体文本。
该属性具有三个值：
正常 正常显示文字
斜体定义粗体
oblique 定义倾斜文本
9CSS链接
链接的四种状态是：
a:link - 正常的、未访问过的链接。
a:visited - 已访问过的链接。
a:hover - 当鼠标悬停在链接上时。
a:active - 单击链接的那一刻。
10 CSS 列表
作用： 1 设置不同的列表项标签 2 设置列表项标签为图片
可以借助 list-style-image 属性将列表项标记更改为使用 list-style-type，使用图像作为标记。
无序列表：
无序列表经常被用作导航栏菜单，一般需要隐藏无序列表项的标签，所以用list-style-type:none来表示没有标签。
list-style-type属性的默认值是圆盘实心圆，即一个小黑点。
不仅没有标记，而且还可以改变标记，如圆形空心圆，方形实心小正方形。
已排序列表：
默认情况下，有序列表项标记使用数字样式显示，即 list-style-type:decimal。
作为列表项标记的图像
要指定列表项标签的图像，可以使用 list-style-image 属性，并且只需设置 url() 值即可使用图像作为标签类型。
列表属性缩写：list-style：list-style-type、list-style-position、list-style-image；
11 个 CSS 表
表格边框：边框
表格长高：宽度和高度
表格对齐：文本对齐和垂直对齐
表格中的行间距：tr、td padding 设置
#tab{ width:50%; font-family:"微软雅黑"; /*设置是否将表格边框合并为单一线条的边框*/ border-collapse:collapse; } #tab th,#tab td{ /*表格边框*/ border:1px solid #7AC942; /*表格内边距*/ padding:5px 10px; } #tab th{ color:white; background-color:#9C3; font-size:1.125em; /*左对齐*/ text-align:left; padding-top:4px; padding-bottom:8px; } #tab .list td{ /*边颜色*/ color:#000; /*背景颜色*/ background-color:#FFC; } caption{ margin-bottom:10px; font-weight:bold; }
| 粗粮 | 蔬菜 | 水果 |
|---|---|---|
| 大豆 | 黄瓜 | 香蕉 |
| 高粱 | 菠菜 | 柠檬 |
| 燕麦片 | 白菜 | 西瓜 |
12CSS选择器分组和嵌套选择器
组选择器，例如：
h1{color:gray;}
p{color:gray;}
可以写成：h1, p{color:gray;}
嵌套选择器，例如：
.div1 p{
color:white;
}
.div1 p a{
color:yellow;
font-weight:bold;
}
嵌套选择器
深层嵌套选择器
转义选择器
*{
padding:0;
margin:0;
}
属性选择器
属性选择器：属性选择器使用[attr]，例如：将所有具有title属性的元素的字体设置为黄色
[title]{
color:red;
}
h1 标题不带有 title 属性
h2 可以设置样式
超链接可以设置样式
属性和值选择器：属性选择器使用 [attr=value]
[title=Hello]{
color:blue;
}
h1 标题 title="Hello world"
h2 可以设置样式
超链接可以设置样式
属性和多个值的选择器：有两种使用情况：属性值之间用空格分隔使用：[attr~=value]
使用连字符分隔的属性值：[attr|=value]
例如：将包含title=“Hello”的元素的字体设置为红色，使用~分隔属性和值
[title~=Hello]{
color:green;
}
[lang|=zh]{
color:gray;
}
h1 标题 title="world"
h2 可以设置样式
h3 可以设置样式
超链接可以设置样式
超链接可以设置样式
表单样式：属性选择器对于设置没有类或 ID 的表单样式非常有用。 例如：
input[type="text"]{
width:150px;
display:block;
margin-bottom:5px;
background-color:yellow;
}
input[type="button"]{
width:120px;
margin-top:5px;
background-color:green;
}
用户名：
昵 称：
3 组合选择器：组合选择器是包括各种简单选择器的组合形式，组合选择器说明了两个选择器之间的直接关系。
后代选择器：也称为包含选择器，以空格分隔，子元素选择器只能选择属于某个元素的子元素的元素。
子元素选择器：子元素选择器只能选择属于某个元素的子元素的元素，以 > 分隔，子元素选择器也只能选择属于某个元素的子元素的元素。
相邻同级选择器：它可以选择紧接在另一个元素之后的元素，并且两者具有相同的父元素，以+分隔。
普通相邻同级选择器：选择指定元素的所有相邻同级元素，以~分隔。
选择器组合：各种选择器可以组合使用。
13 CSS 伪类（不区分大小写）
CSS 伪类用于为某些选择器添加特殊效果。
语法：选择器:伪类{attr:value;}
CSS 类也可以使用伪类：选择器.class:伪类{attr:value;}
(1)超链接伪类
在浏览器中，链接的不同状态可以用不同的形式显示：
a:link{color:#FF0000;} /* 未访问的链接显示为红色 */
a:visited{color:#00FF00;} /* 已访问的链接显示为绿色 */
a:hover{color:#FF00FF;} /* 鼠标划过链接显示为紫红色 */
a:active{color:#0000FF;} /* 已选中的链接显示为蓝色 */
注意：在CSS定义中，a:hover必须放在a:link和a:visited之后，
a:active 必须放在 a:hover 之后才有效。
（2）伪类和CSS类（伪类可以和CSS类结合使用）（3）CSS2-:first-child伪类
第一个 p 元素
第二个 p 元素
第三个 p 元素
选择 p 作为任意元素的第一个子元素。 选择器使用 p:first-child。
选择所有 p 元素的第一个子元素 b。 选择器使用 p>b:first-child。
选择作为 p 的第一个子元素的所有 b 元素。 选择器使用 p:first-childb。
(4) CSS2-:lang伪类
使用 :lang 伪类为不同语言定义特殊规则：
html:lang(zh-CN){
color:blue;
}
:lang(en)>p{
color:gray;
}
14 CSS 伪元素
CSS 伪元素用于为某些选择器添加特殊效果。
语法：选择器:伪元素{attr:value;}
CSS 类也可以使用伪元素：selector.class:pseudo-element {attr:value;}
(1) CSS2-:伪元素之前
h1:before{
content:url(images/logo.gif);
}
(2) CSS2-:after伪元素
h1:after{
content:url(images/logo.gif);
}
content 属性与 :before 和 :after 伪元素结合使用来插入生成的内容。 该属性用于定义放置在元素之前或之后的生成内容。
content的内容通常可以有四种类型：
content:none 该值为默认值，不插入任何内容。
内容：“字符串”插入文本。
content:attr（属性）插入标签属性值。
content: url(path) 使用指定的绝对或相对地址插入外部资源，可以是图像、音频、视频或浏览器支持的任何其他资源。
15个块级元素和内联元素
块级元素（block-level）：每个块元素一般自己占据一整行或多行。
可以为其设置长度、高度、对齐等属性，常用于网页布局和网页结构的构建中。
常见的块元素有〜，
,
,
相关文章
摘要 今天小编就给大家讲解一下CSS背景属性的5个应用实例。 相信朋友们应该关注这个话题。 小编还收集了5个CSS背景属性的应用。
今天小编就给大家讲解一下CSS背景属性的5个应用实例。 相信朋友们应该关注这个话题。 我还收集了5个CSS背景属性应用实例的相关资料。 朋友们看起来很有帮助。
1 Li列表 我们可以通过ul和li的形式构造一些无序列表。 通过ul+li背景css，我们不仅可以制作一些漂亮的菜单，还可以制作一些完美的树形结构。 ul+li默认样式，后面有一个小黑点。 在实际项目中，我们可以将这个小黑点替换为背景。 我们看两个例子： //demo.aidi.net.cn/html/cssbackground/a1/demo2.html
2、文本替换 文本替换也是项目中比较常用的技术。 在实际开发中，经常需要使用图片来代替文字。 用背景替换文本。 我们看下面3个例子： //demo.aidi.net.cn/html/cssbackground/a2/demo2.html 其实我需要对上面2个例子做一个补充说明：在例子2中通过text-indent： -9999px； 属性将文本隐藏在看不见的地方。 当然，有一个缺点：当禁用图像下载时，什么也没有。 示例3中，通过添加额外的标签来遮挡文本，然后使用定位方法将背景定位在下方。 还有一个缺点：图片需要能够完全覆盖文字，并且图片必须是立体的。
3. 自适应按钮 实际中经常会用到自适应。 我们不需要通过自适应来制作额外的图片。 我见过一些老项目，给不同文字的按钮做了很多不同的图片，而且每个按钮的样式都是btn2word、btn4word、btn6word……可见是非常不灵活的。 自适应按钮可以从根本上解决这个问题。 让我们看一个例子：您已经听说过自适应需要至少 2 个结束元素。 自适应按钮是通过将一个背景左对齐和右对齐另一背景图像来制作的。
4. 圆角 许多物品过去都是方角的。 不知道什么时候开始流行圆角的。 就像汽车一样背景css，过去的桑塔纳的角是方的，但现在的车都是圆的。 圆角的实现方法和自适应类似，只是背景的对齐方法有点不同。
5、等高列 这是我最近看到的一个无可挑剔的网页设计的例子。 确实，作者也解释得很好。 而我在项目中也确实遇到了这个问题。 不过，解决办法似乎并不像作者那么简单。 废话不多说，我们来看三个例子： //demo.aidi.net.cn/html/cssbackground/a5/demo2.html 其实你已经看到我要解释的内容了。 对了，就是侧边栏和主栏的高度。 在实践中，我们经常想让它们呈现相同的高度。 这些效果是通过使用最里面的元素的背景图像来实现的。下载包
![css痘-痤疮是怎么产生的[图片]](https://www.wkzy.net/wp-content/themes/ceomax/timthumb.php?src=https://www.wkzy.net/wp-content/uploads/2024/05/1714562068153_1.webp&h=200&w=300&zc=1&a=c&q=100&s=1)
