1. CSS介绍
-
描述：CSS（Cascading Style Sheet，层叠样式表)定义显示HTML元素的格式。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行渲染格式化
-
语法：每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值，每个声明之后用分号结束，css的声明使用花括号
-
注释：
/*注释内容*/
2. CSS的引入方式
-
行内引入(行内式)：直接在标签内设置style属性和值
<p style="color:red">内容</p>
-
内部引入(嵌入式)：在head标签中添加style标签，在style中添加属性和值
<head>
...
<style>
p {
color:red;
}
</style>
</head>
-
内部链接外部(链接式)：将一个.css文件引入到HTML文件中
<link rel="stylesheet" href="style.css type="text/css"/>
-
外部导入(导入式)：将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中
<style type="text/css">
@import"./style.css";
</style>
-
注意：入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点
3. CSS选择器
基本选择器
<style>
p {
color: red;
}
</style>
<p>内容</p>
<!--把所有的p标签字体样式设置为红色-->
-
id选择器：使用设置id值的方式添加样式，id的值不能重复，id的样式格式是'#id值'
<style>
#i1 {
color: red;
}
</style>
<p id="i1">内容</p>
<!--把id为'i1'的标签字体样式设置为红色-->
-
class选择器：使用设置class值的方式添加样式，class的值可以重复，class的样式格式是'.'
-
通用选择器：为整个页面添加样式，使用'*'通配添加
<style>
* {
color: red;
}
</style>
<!--页面中的所有字体样式都会设置为红色-->
层级选择器
-
后代选择器：指定标签内部指定特定标签的样式，多层也会生效
<style>
div p{
color: red;
}
</style>
<div>
<p>内容</p>
<div><p>内容</p><div>
<span><p>内容</p></span>
</div>
<!--把div中所有的p标签字体样式设置为红色，子标签中的p，子子标签中的p都会被生效-->
<style>
div>p {
color:red;
}
</style>
<div><p>内容</p><div>
<!--把父标签为div的p标签字体样式设置为红色-->
<style>
div+p {
color: red;
}
</style>
<div>content</div>
<p>内容</p>
<!--紧跟div之后的p标签字体样式设置为红色-->
<style>
div~p {
color: red;
}
</style>
<div>content</div>
<p>内容</p>
<p>内容</p>
<span>content</span>
<p>内容</p>
<!--div之后所有的p标签字体样式设置为红色-->
-
组合选择器：同时给多个标签添加样式，标签之间使用','分隔
<stype>
div,p {
color: red;
}
</style>
<div>内容</div>
<p>内容</p>
<!--把div和p标签的字体样式都设置为红色-->
属性选择器
<style>
p[title] {
color: red;
}
</style>
<p title="yy">内容</p>
<!--把带有属性title的p标签字体样式设置为红色-->
-
[属性名="属性值"]：为带有指定属性名和属性值的标签添加样式
<style>
p[title=""] {
color: red;
}
</style>
<p title="yy">内容</p>
<!--把带有title属性并且值为yy的p标签字体样式设置为红-->
-
[属性名~="属性值"]：为带有指定属性名包含指定属性值并且指定的属性值是一个单词的标签添加样式
<style>
div[title~="yy"] {
color: red;
}
</style>
<div title="1yy1">内容</div>
<div title="2yy2">内容</div>
<!--把带有title属性并且值包含yy的div标签字体样式设置为红-->
-
[属性名*="属性值"]：为带有指定属性名包含指定属性值的标签添加样式
<style>
div[title*="yy"] {
color: red;
}
</style>
<div title="1yy1">内容</div>
<div title="2yy2">内容</div>
<!--把带有title属性并且值包含yy的div标签字体样式设置为红-->
-
[属性名|="属性值"]：为带有指定属性名以指定属性值开头并且指定的属性值是一个单词的标签添加样式
<style>
div[title|="yy"] {
color: red;
}
</style>
<div title="yy1">内容</div>
<div title="yy2">内容</div>
<!--把带有title属性并且值为yy开头的div标签字体样式设置为红-->
-
[属性名^="属性值"]：为带有指定属性名以指定属性值开头的标签添加样式
<style>
div[title^="yy"] {
color: red;
}
</style>
<div title="yy1">内容</div>
<div title="yy2">内容</div>
<!--把带有title属性并且值为yy开头的div标签字体样式设置为红-->
-
[属性名$="属性值"]：为带有指定属性名以指定属性值结尾的标签添加样式
<style>
div[title$="yy"] {
color: red;
}
</style>
<div title="1yy">内容</div>
<div title="2yy">内容</div>
<!--把带有title属性并且值为yy结尾的div标签字体样式设置为红-->
伪类选择器
4. CSS继承
-
描述：继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代
-
说明：继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等
5. CSS优先级
-
描述：CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
-
特殊：!important声明的规则高于一切
-
注意：如果声明的名称一样，后加载的会覆盖之前的
-
说明：样式表中的特殊性描述了不同规则的相对权重，按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较
-
内联元素 --> 1000
-
id选择器 --> 100
-
class选择器 --> 10
-
标签选择器 --> 1
-
优先级顺序：
-
!important
-
<style="属性名:属性值">
-
#ID
-
.class
-
<标签名>
-
继承
6. 颜色属性
-
描述：用来设置字体的颜色
-
方式：
-
颜色名称：
-
十六进制：
-
十六进制缩写(必须两两字母或数字一样)：
-
rgb(三位数字取值都是1-255，分别代表：红r，绿g，蓝b)：
-
rgba(前三位数字取值都是1-255，分别代表：红r，绿g，蓝b，最后一位取值是0-1，代表透明度，0是完全透明，1是完全显示)：
7. 字体属性
-
描述：用来设置字体的属性
-
方式：
-
字体大小：
-
字体类型：
-
字体风格：
-
normal：默认值
-
italic：斜体
-
oblique：倾斜
-
字体权重：
-
normal：默认值
-
bold：粗
-
boldld：更粗
-
lighter：更细
-
100~900的整百数字
8. 背景属性
-
描述：用来设置字体或者区域的背景
-
方式：
-
背景颜色(设置背景颜色和字体颜色属性的方法一样)：
-
背景图片：
-
背景重复：
-
repeat：重复平铺满
-
repeat-x：向X轴重复
-
repeat-y：向Y轴重复
-
no-repeat：不重复
-
背景位置(如果只设置一个值，第二值默认是center)：
-
top：上
-
buttom：下
-
left：左
-
right：右
-
简写方式：
backgroud: #FFFFFF URL('./img.jpg') no-repeat left center
9. 文本属性
-
设置文本的水平对齐方式
-
方式：
-
横向排列方式：
-
left：左对齐
-
center：居中
-
right：右对齐
-
文本行高：
-
首行缩进：
-
文本方向：
-
垂直对齐方式(只对行内元素生效，对于块级元素无效)：
-
删除文本装饰(常用于a标签删除超链接的下划线)：
-
字母间距：
-
单词间距：
-
文本转换：
-
capitalize：每个单词以大写字母开头
-
uppercase：全部转为大写字母
-
lowercase：全部转为小写字母
10. 边框属性
-
描述：设置边框的属性
-
边框风格：
-
统一风格：border-style
-
设置一个值时，代表上下左右
-
设置两个值时，第一个代表上下、第二个代表左右
-
设置三个值时，第一个代表上、第二个代表左右、第三个代表下
-
设置四个值时，第一个代表上、第二个代表右、第三个代表下、第三个代表左
-
单独风格：
-
border-top-style：上边边框样式
-
border-bottom-style：下边边框样式
-
border-left-style：左边边框样式
-
border-right-style：右边边框样式
-
边框风格的属性值：
-
none：无边框
-
hidden：与"none"相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突
-
solid：实线边框
-
dashed：虚线边框
-
dotted：点状边框
-
double：双线边框
-
groove：3D凸槽边框
-
ridge：3D垄状边框
-
inset：3D inset边框
-
outset：3D outset边框
-
边框宽度：
-
统一风格：border-width
-
设置一个值时，代表上下左右
-
设置两个值时，第一个代表上下、第二个代表左右
-
设置三个值时，第一个代表上、第二个代表左右、第三个代表下
-
设置四个值时，第一个代表上、第二个代表右、第三个代表下、第三个代表左
-
单独风格：
-
border-top-width：上边边框宽度
-
border-bottom-width：下边边框宽度
-
border-left-width：左边边框宽度
-
border-right-width：右边边框宽度
-
边框宽度的属性值：
-
thin：细边框
-
medium：中等边框，默认值
-
thick：粗边框
-
边框颜色：
-
统一风格：border-color
-
设置一个值时，代表上下左右
-
设置两个值时，第一个代表上下、第二个代表左右
-
设置三个值时，第一个代表上、第二个代表左右、第三个代表下
-
设置四个值时，第一个代表上、第二个代表右、第三个代表下、第三个代表左
-
单独风格：
-
border-top-color：上边边框颜色
-
border-bottom-color：下边边框颜色
-
border-left-color：左边边框颜色
-
border-right-color：右边边框颜色
-
边框颜色属性设置方法跟字体颜色、背景颜色的设置方法一样
-
简写方式：
border: 边框风格 边框宽度 边框颜色
11. 列表属性
-
列表标记的类型：
-
none：无标记
-
disc：默认。标记是实心圆
-
circle：标记是空心圆
-
square：标记是实心方块
-
decimal：标记是数字
-
decimal-leading-zero：0开头的数字标记
-
lower-roman：小写罗马数字
-
upper-roman：大写罗马数字
-
lower-alpha：小写英文字母The marker is lower-alpha
-
upper-alpha：大写英文字母The marker is upper-alpha
-
lower-greek：小写希腊字母
-
lower-latin：小写拉丁字母
-
upper-latin：大写拉丁字母
-
hebrew：传统的希伯来编号方式
-
armenian：传统的亚美尼亚编号方式
-
georgian：传统的乔治亚编号方式
-
cjk-ideographic：简单的表意数字
-
hiragana：标记是：a, i, u, e, o, ka, ki, 等
-
katakana：标记是：A, I, U, E, O, KA, KI, 等
-
hiragana-iroha：标记是：i, ro, ha, ni, ho, he, to, 等
-
katakana-iroha：标记是：I, RO, HA, NI, HO, HE, TO, 等
-
列表标记的位置：
-
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
-
outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
-
列表标记的图像：
-
简写方式：
list-style: 标记的类型 标记的位置 标记的图像
浙公网安备 33010602011771号