内联样式
样式定义在HTML元素的标准属性style中，CSS语法：
1）只需要将分号隔开的一个或多个属性/值对作为元素的style属性的值；
2）属性和值之间用：连接；
3）属性之间用；隔开；
Eg.1 < h1 style=“color:blue; background-color:silver;”>文本< /h1>
一般禁止使用内联样式，优先级最高(离元素最近)且不能重用
内部样式表
样式表规则位于文档头元素< style>元素内，在文档< head>元素内添加< style>元素，在< style>元素中添加多个样式规则，每个样式规则由选择器(决定使用该样式的元素)和样式声明(使用{}包含多个属性/值对)组成；
可以在本页面重用，但不能在其他文件调用，所以多用于学习和测试
Eg.2 < style type=“text/css”>h1{color:blue;}< /style>
外部样式表
创建单独的样式表文件用来保存样式规则，文件后缀为.css的纯文本文件，该文件只包含样式规则(由选择器和样式声明组成)；
在需要使用该样式表文件的页面上，使用< link>元素在文档< head>元素内连接需要的外部样式表文件；
< link rel=“stylesheet” type=“text/css” href=“myStyle.css” />

2. CSS语法

2.1 CSS语法规范

2.1.1 CSS语法规范

内联样式：由样式声明组成；
样式表(内部样式表或外部样式表)：由多个样式规则组成，选择器和样式声明
在这里插入图片描述

2.1.2 CSS样式表特征

继承性：大多数CSS样式规则可以被子元素继承；
层叠性：可以定义多个样式，不冲突时多个样式表中的样式可层叠为一个；
优先级：样式定义冲突会按照不同样式规则的优先级来应用样式

2.1.3 样式优先级

浏览器默认样式 < 外部样式表或内部样式表(就近原则) < 内联样式
如果重复定义相同的样式，以最后一次定义为准

2.1.4 !important规则

!important可以调整样式规则的优先级；
直接将!important添加在样式规则之后，中间用空格隔开：选择器{属性：属性值 !important; }

2.2 CSS选择器

2.2.1 通用选择器

星号*，匹配所有标签设置默认样式，效率极低，基本不使用；
除了内外边距清零：*{margin:0; padding:0;}

 *
 {
 	font-size:9pt;
 }

2.2.2 元素选择器

html文档的元素，比如< p>、< h1>等

 h1
 {
 	font-size:9pt;
 }

2.2.3 类选择器

语法：.className {color: red; }
1）类名称不能以数字开头；由字母、数字、字符-和_组成
2）在样式表中声明样式类，在html文档中将元素的class属性的值设置为样式类的名称；
3）可以将多个类选择器应用于同一个元素(多类选择器)，各个词之间用空格分隔;

.important{}
.bgc{}
<h1 class="important"></h1>
<p class="important bgc"></p>

结合类选择器和元素选择器以实现对某种元素不同样式的细分控制（分类选择器）
语法：元素选择器.className{}
将样式规则与附带class属性的某种元素匹配：元素class属性的值为分类选择器中指定的样式类名
指向更精确，提升样式优先级

//只有p元素使用important样式
    p.important{}
    <h1 class="important"></h1>
    <p class="important"></p>

2.2.4 id选择器

id选择器以独立于文档元素的方式指定样式，仅作用于id属性的值。
语法：选择器前面需要#号；选择器本身为文档某个元素id属性值。
在样式表中定义#id_value{}；在HTML文档中将元素id属性的值设置为选择器的名称

#id_value{}
<h1 id="id_value"></h1>

2.2.5 群组选择器

选择器声明以逗号隔开的选择器列表，用于将相同的规则作用于多个元素

h2, p.important
{
	color: green;
}

2.2.6 后代选择器

依据元素在其位置的上下文关系定义样式，用于选择作为某元素后代的元素，用空格分隔

   //只有<h1>元素中的<span>元素中的文本才能使用该样式
    h1 span
    {
    	color:red;
    }

2.2.7 子代选择器

子代选择器要求选择器之间只能存在父子关系，不能任意选择后代元素，使用符号>作为子结合符

div>span {
}
//只有<div>的子元素<span>元素中的文本使用该样式

2.2.8 伪类选择器

伪类用于向某些选择器添加特殊的效果，使用冒号:作为结合符，左边是其他选择器，右边是伪类;

链接伪类
:link，未访问的链接
:visited，访问过的链接
动态伪类(用于呈现用户操作)
:hover，鼠标悬停在HTML元素
:active，HTML元素被激活
:focus，HTML、元素获取焦点
目标伪类
元素状态伪类
结构伪类
否定伪类

2.2.9 选择器优先级

选择器类型	权值
元素选择器	0,0,0,1
类选择器	0,0,1,0
伪类选择器	0,0,1,0
ID选择器	0,1,0,0
内联样式	1,0,0,0

选择器的权值加到一起，数值大的优先，权值相同则后定义的优先；
选择器的权值计算不会超过其权值的最大数量级；
内联样式不能加!important

3.尺寸与边框

3.1 CSS单位

3.1.1 尺寸单位

in：英寸(1in=2.54cm)
cm：厘米
mm：毫米
pt：磅(1/72英寸)
px：像素(计算机屏幕上一个点)
em：1em等于当前字体尺寸，2em等于当前字体尺寸的两倍，继承父级元素的字体大小；
%：相对于父元素百分比；
rem：与em类似，相对于根元素(body/html)设置字体尺寸的倍数

3.1.2 颜色单位

表示颜色的英文单词，red
rgb(r,g,b)：RGB值，rgb(255,255,255)代表白色
#rrggbb：十六进制数，#ff0000
#rgb：简写十六进制数，#f00
rgba(r,g,b,alpha) 透明值0~1
rgb(r%,g%,b%):RGB百分比值，表现形式使用极少

3.2 尺寸属性

3.2.1 尺寸

用于设置元素的宽度和高度，取值一般为像素或百分比。
宽度属性：
width、max-width、min-width
高度属性：
height、max-height、min-height

3.2.2 溢出

使用尺寸属性控制框的大小，如果内容所需空间大于框本身会导致内容溢出，默认垂直溢出；
overflow：指示内容溢出元素框的处理方式
visible默认值、hidden、scroll(横向纵向一直显示滚动条)、auto
overflow-x
overflow-y

3.2.3 设置尺寸属性

可以设置尺寸属性的HTML元素：

块级对象
p、div、h#、ul,ol,li,dl,dt,dd等
存在width、height属性的行内元素
img、table
行内块元素

3.3 边框属性

3.3.1 边框

border：width style color;
单属性设置：必须有style属性才可以正常显示
border-width/style/color;
单边定义：
border-left/right/top/bottom-width/style/color;
border-left/right/top/bottom: width style color;
边框样式style 实线solid dotted圆点虚线 dashed 短线虚线 double双实线
边框颜色可设置为transport，创建有宽度的不可见边框
取消边框：border:none/0;

3.3.2 边框倒角

border-radius属性：顺时针设置四个倒角，取值为绝对值或百分比；50%表示圆
单独定义：
border-top-left-radius;
border-top-right-radius;
border-bottom-left-radius;
border-bottom-right-radius;

3.3.3 边框阴影

box-shadow：向方框添加多个阴影，取值为多属性值的列表
h-shadow：必需，水平阴影的位置
v-shadow：必需，垂直阴影的位置
blur：阴影模糊距离
spread：阴影尺寸
color：阴影颜色
inset：将外部阴影改为内部阴影

3.3.4 轮廓

轮廓是边框边缘的外围，用于突出元素
outline：width style color ;
outline: none/0;
//轮廓宽度、轮廓样式、轮廓颜色

CSS3_1.概述、语法、尺寸与边框

CSS概述、语法、尺寸与边框

1.CSS概述

1.1 CSS概述

1.1.1 CSS作用

1.1.2 CSS定义

1.1.3 CSS与HTML之间关系

1.1.4 HTML属性与CSS样式的使用原则

1.1.5 常用属性

1.2 CSS样式表

1.2.1 CSS样式表使用方式