CSS
全称Casading Style Sheets，层叠样式表，控制HTML标签的样式，在美化网页中起到非常重要的作用。
CSS编写格式是键值形式的，比如
color: red;
冒号:左边的是属性名，冒号:右边的是属性值.
①CSS中书写形式
1.行内样式(内联样式) 直接在标签的style属性中书写
<body style= “color:red;”>
案例:
<div style="color: blue; font-size: 28px; background-color: aliceblue"> <p style="color: red; border: 5px solid paleturquoise">我是段落</p> </div>
2.页内样式：在本网页的style标签中书写
<style> body { color: red; } </style>
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS页内样式</title> <style> div { color: red; font-size: 28px; border: 4px solid yellow; } p { color: blue; font-size: 28px; } </style> </head> <body> <div>我是容器标签</div> <p>我是段落标签</p> </body> </html>
3.外部样式：在单独的CSS文件中书写，然后在网页中用link标签引入
<!--引入外部样式--> <link rel="stylesheet" href="./css/index.css">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS外部样式</title> <!--引入外部样式--> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div>我是容器</div> <p>我是段落</p> </body> </html>
②CSS定义样式表
1>直接使用html标签定义选择器
<style> div { color: red; font-size: 28px; border: 4px solid yellow; } p { color: blue; font-size: 28px; } </style>
2>class定义：类名选择器,定义是以"."开始，.p{color: red}，子类选择器 .baby text{color: blue;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS选择器</title> <style> .container { color: red; font-size: 28px; border: 4px solid yellow; } </style> </head> <body> <div class="container">我是容器标签</div> </body> </html>
3>id定义：id选择器，定义是以"#"开始的，且只能出现一次。#p{color: blue;}
4>选择器优先级问题
(1). ID>Class>HTML ;
(2).同级时选择离元素最近的一个执行#p{color:red} #p{colod:#f60}执行颜色为#f60的.
(3). z-index 提高优先级
5>组合选择器：同时控制多个元素，多个元素之间用"，"隔开。
<!--组合选择器--> h1,h2,h3,.bb { font-size: 20px; color: red; }
6>伪元素选择器
(1) a:link 正常连接的样式 (2).a:hover 鼠标放上去的样式
(3) a:active :选择链接时的样式 (4).a:visited 已经访问过的链接的样式
<style type="text/css"> a:link { color: red; } a:hover { color: green; } a:active { color: yellow; } a:visited { color: lightgray; } </style>
CSS规律
1.就近原则：如果对同一个标签设置了不同的样式，该标签会找最近的样式
2.叠加原则：同时导入页内样式和外部样式，页内样式不设置字体大小和颜色，该标签会使用外部样式。
③CSS常见属性：
1.颜色属性
<!--color属性定义文本的颜色--> <!--1.英文单词color:green; --> <!--2.十六进制颜色值：color:#ff6600 简写式#f60--> <!--3. RGB颜色--> <!--红绿蓝RGB颜色，每个取值0~255：color:rgb(255,255,255)--> <!--RGBA 颜色，带透明度：color : rgba (255,255,255,1)--> <!-- 红色:color: rgb(255,0,0) --> <!--绿色:color: rgb(0,255,0) --> <!--蓝色:color: rgb(0,0,255) --> <!--白色:color: rgb(255,255,255)--> <!-- 黑色:color: rgb(0,0,0) -->
2.字体属性
1.font-size 字体大小
px:设置一个固定的值；%父元素的百分比；smaller 比父元素更小；larger 比父元素更大；inherit [ɪnˈherɪt] ：继承父元素的
比如body设置字体20px ,那么子元素h1设置100% 是按照body 的百分比.
2.font-family 定义字体:font-family : 微软雅黑，serif;可以使用”,”隔开,可以确保当字体不存在的时候直接使用下一个
3.font-weight 字体加粗 normal :默认值 bold 粗 、bolder 更粗 、lighter、更细;normal = 400,bold = 700,100,200,300~900
4.font-style 字体样式 ： normal:正常，标准 italic[ɪˈtælɪk]:斜体; oblique[əˈbli:k] 倾斜; inherit：继承 <em>默认会增加一个斜体
5.font-variant[ˈveəriənt] 变体 小型大写字母显示文字 :normal :标准; inherit:继承;small-caps ：小型大写字母显示文字 小写变大写
3.背景属性
1.背景颜色：background-color
2.背景图片：background-image
3.背景展示方式：background-repeat : repeat :重复平铺满 repeat-x ： 向x轴重复 repeat-y ： 向y轴重复 no-repeat : 不重复
4.背景位置：background-position : 横向：(left,center,right) 纵向(top , center , bottom) ;还可以用数值来表示位置
简写方式：background: 背景颜色 url(图像) 重复 位置 ; background: #60 url(img/bg.jpg) no-repeat top center.
4.文本属性
1.text-align 横向排列 left ,center ,right
2.line-height 文本行高 : ①%基于字体大小的百分比行高②数值 来设置固定值
3.text-ident 首行缩进 % 父元素的百分比；px固定值，默认0; inherit 继承
4.letter-spacing : 字符间距 normal 默认; length 具体数值;inherit 继承
5.word-spacing : 单词间距 normal 默认; px 具体数值;inherit 继承
6.direction :文本方向 : ltr 从左到右，默认值; rtl 从右到左 ; inherit 继承
7.text-transform : 文本大小写 : none 默认 capitalize :每个单词以大写字母开头；uppercase 定义仅有大写字母 ; lowercase 定义仅有小写字母 inherit 继承父元素的text-transform .
5.边框属性
简写：border : solid 2px #f60;
1.边框风格：border-style
单独定义某一方向的边框样式。
border-bottom-style 下边边框样式
border-top-style 上边边框样式
border-left-style 左边边框样式
border-right-style 右边边框样式
边框风格样式的属性值：
① none 无边框 ②solid 直线边框 ③dashed 虚线边框④dotted 点状边框 ⑤double 双线边框 ⑥groove 凸槽边框⑦ridge 垄状边框 ⑧inset inset 边框 ⑨outset outset 边框 10.inherit 继承
2.边框宽度：
border-width 属性值： ①thin 细边框 ②medium 中等边框 ③thick 粗边框④px固定值⑤inherit继承
3.边框颜色：border-color 属性值的四种情况：
一个值：border : (上、下、左、右)；
两个值：border : (上下) (左右); border-color: green red;上下为绿，左右为红
三个值：border : (上) (左、右) (下); border-color: green red yellow; 上边为绿色；下边为黄色；左右为红色
四个值：border : (上) (右) (下) (左);border-color: green red yellow darkcyan;上边为绿色；右边为红色；下边为黄色；左为青色
简写：border : solid 2px #f60;
6.列表属性
1.list-style-type 标记的类型
none ：无标记;
disc默认，标记是实心圆;
circle 标记是空心圆 ;
square 标记是实心方块;
decimal 标记是数字[ˈdesɪml]；
其他
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
2.list-style-position 标记的位置 :
inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit规定应该从父元素继承 list-style-position 属性的值。
3.list-style-image 设置图像列表标记 : URL 图像的路径；none 默认，无图形被显示 ; inherit 继承
4.list-style :简写方式 list-style : square inside url(‘i/arrow.jpg’);
CSS规律
1.就近原则：如果对同一个标签设置了不同的样式，该标签会找最近的样式
2.叠加原则