CSS基础知识整理
导读：1 什么是CSS？ CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。 CSS以HTML为基础，提供了丰富...
1 什么是CSS？
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
2 CSS语法
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: "sans serif";
}
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;
}
行内式(内联样式)
外部样式表(外链式)
样式优先级：内联样式>
内部样式>
外部样式
三种样式表区别：
行内样式表 ：优点 书写方便；缺点 没有实现样式和结构相分离；使用情况 较少；控制范围 控制一个标签(少)。
内部样式表：优点 部分结构和样式相分离； 缺点 没有彻底分；使用情况 较多；控制范围 控制一个页面(中)。
外部样式表：优点 完全实现结构和样式相分离； 缺点 需要引入；使用情况 最多，推荐；控制范围 控制整个站点(多)。
4 id和class选择器
ID选择器：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。
HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。注意： id 属性不能以数字开头。
语法：
#id名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
class选择器：
class 选择器用于描述一组元素的样式，也叫做类选择器。
class 可以在多个元素中使用，并且一个元素也可以指定多个类名。
在 CSS 中，类选择器以一个点 "." 号来定义。
同样的类名的第一个字符也不能使用数字。
语法：
.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
ID 选择器和类（class）选择器的区别：
相同点：
都可以应用于任何元素
不同点：
ID 选择器只能在文档中使用一次，而类选择器可以使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名)，而ID只能指定一个。
5 CSS元素选择器
最常见的CSS选择器就是元素选择器，也就是标签选择器，也就是在HTML中元素的最基本的选择器。
语法：
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
或者
元素名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
6 CSS背景(background)
background 属性用于定义 HTML 元素的背景。
定义元素背景效果的 CSS 属性有五种：
background-color 背景颜色
background-image 背景图像
background-repeat 背景图像设置水平或垂直平铺或不平铺
background-position 背景图像设置定位
background-attachment 背景图像设置固定或滚动
背景属性简写：
body{
background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}
当使用简写属性时，属性值的顺序依次为：
background-color -->
background-image -->
background-repeat -->
background-attachment -->
background-position
7 CSS外观属性
CSS文本格式主要分为：文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。
文本对齐方式：text-align属性有四个值：left，center，right，justify(两端对齐)；属性默认值为auto。
文本修饰：text-decoration 属性用来设置或删除文本的修饰。
主要是用来删除超链接的下划线，也可以使用其他值来设置文本的修饰；
text-decoration:overline，设置文本上划线。
text-decoration:line-through;
设置文本中间划线。
text-decoration:underline;
设置文本下划线。
文本阴影：text-shadow: x y shadow color；
其中 x 是水平阴影的偏移值，
y 是垂直阴影的偏移值，
shadow 用于指定阴影的模糊值，即模糊效果的作用距离，不允许负值。
color 指定阴影的颜色。该属性有两个作用，产生阴影和模糊主体。
文本缩进：用来指定文本的首行缩进，允许为负值，如果值是负数，第一行则向左缩进。
CSS表示为：text-indent:2em，em 是相对文字大小的单位，1em 就是1个文字大小，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 属性指定元素内的空白如何处理，默认值为 normal 空白会被浏览器忽略。
该属性还有4个值：
nowrap 文本不会换行，禁止换行，文本会在同一行上继续，直到遇到 标签为止。 pre 空白会被浏览器保留，这种方式类似 HTML 中的
标签，用于定义预格式文本。
pre-wrap 指定保留空白符序列，但是正常地进行换行。
pre-line 指定合并空白符序列，但是保留换行符，并允许自动换行。
文本转换：text-transform 属性控制文本中的字母。
是用来指定在一个文本中的大写和小写字母，可用于将所有字句变成大写或小写字母，或每个单词的首字母大写。
text-transform:capitalize， 定义文本中的每个单词以大写字母开头。
text-transform:uppercase，定义文本仅有大写字母。
text-transform:lowercase，定义文本仅有小写字母。
8 CSS字体 (font)
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 属性主要用于指定斜体文字。
属性有三个值：
normal正常显示文本
italic 定义斜体
oblique 定义倾斜的文字
9 CSS链接
链接的四种状态是：
a:link - 正常，未访问过的链接。
a:visited - 已访问过的链接。
a:hover - 当鼠标滑动到链接上时。
a:active - 链接被点击的那一刻。
10 CSS列表
作用：1 设置不同的列表项标记 2 设置列表项标记为图像
修改列表项标记使用 list-style-type，使用图像作为标记可以利用 list-style-image 属性完成。
无序列表：
无序列表经常用来做导航栏菜单，通常都需要隐藏无序列表项的标记，那么就使用 list-style-type:none，表示无标记。
list-style-type 属性的默认值为 disc 实心圆，即小黑点。除了无标记还可以修改标记，例如circle空心圆，square实心方块。
有序列表：
有序列表项标记默认使用数字样式显示，即 list-style-type:decimal。
图像作为列表项标记
要指定列表项标记的图像，可以使用 list-style-image 属性，只需要简单地设置一个 url() 值，就可以将图像作为标记类型。
列表属性简写：list-style：list-style-type，list-style-position，list-style-image;
11 CSS表格
表格边框： border
表格宽度和高度：width 和 height
表格对齐：text-align 和 vertical-align
表格内边距：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;
}
| 粗粮 | 蔬菜 | 水果 |
|---|---|---|
| 大豆 | 黄瓜 | 香蕉 |
| 高粱 | 菠菜 | 柠檬 |
| 燕麦片 | 白菜 | 西瓜 |
嵌套选择器 深层嵌套选择器
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 可以设置样式 超链接可以设置样式 超链接可以设置样式 表单样式：属性选择器在为不带有 class 或 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-child b。 (4)CSS2 - :lang 伪类 使用 :lang 伪类可以为不同的语言定义特殊的规则： html:lang(zh-CN){ color:blue; } :lang(en)> p{ color:gray; } 14 CSS 伪元素 CSS 伪元素是用来为一些选择器添加特殊的效果。 语法：选择器:伪元素{ attr:value; } CSS 类也可以使用伪元素：选择器.class:伪元素{ attr:value; } (1)CSS2 - :before 伪元素 h1:before{ content:url(images/logo.gif); } (2)CSS2 - :after 伪元素 h1:after{ content:url(images/logo.gif); } content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容，该属性用于定义元素之前或之后放置的生成内容。 content 的内容一般可以为四种： content:none 该值是默认值，不插入内容。 content:"string" 插入文本。 content:attr(属性) 插入标签属性值。 content:url(路径) 使用指定的绝对或相对地址插入一个外部资源，可以是图像，音频，视频或浏览器支持的其他任何资源。 15 块级元素和行内元素 块级元素(block-level)：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。 常见的块元素有~、
、
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS基础知识整理
本文地址： https://pptw.com/jishu/664732.html