关键词：
1 选择器的优先级
选择器的优先主要考虑选择器的权重
可以将各种选择器的权重以数值来表示，数值越大，优先级越高
| 选择器 | 权重值 |
| 标签selector | 1 |
| 类选择器 | 10 |
| ID选择器 | 100 |
| 行内样式 | 1000 |
复杂选择器优先级的计算：
1 群组选择器不参与计算
后代和子代选择器，各种选择器权值
2 伪类选择器的权值与类选择器保持一致，都是10
2 尺寸单位
1 。px ：像素单位，浏览器默认单位
2 %：百分比，参照父元素对应属性的值计算
3 in : inch 英寸 换算： 1 inch = 2.54cm
4 pt :磅 ，1 pt = 1/72 in
5 cm
6 mm
补充：
7 em:默认情况下，字体大小为16px, 1 em =16px
3 颜色取值
1 英文单词
2 rgb()表示法：
根据红绿蓝三原色组合呈现不同的颜色
每个值取值范围 0~255
3 rgba(r,g,b,alpha)表示法
rgb三原色取值范围 0~255
alpha透明度取值范围0 （透明）-1（不透明）
4 颜色的十六进制表示法
把三原色的十进制范围 0~255 转换成十六进制表示
十六进制的取值范围：0-9 a-f
0-255 换算成十六进制 00-ff
语法：#开头，跟 上 6位的十六进制，每两位为一组表示一种三原色
5 短十六进制表示颜色
# 开头，采用三位十六进制代表三原色
浏览器在解析时，会自动会对每一位进行重复，补全成长十六进制
3 HTML 标签分类
1 块级元素：
特点：
1 独占一行，不与其他元素共行
2 可以手动调整宽度
3 默认情况下，块元素的宽度与父元素保持一致
常见块元素：body h1-h6 div ul ol li table form p
2 行内元素：
特点：
1 可以与其他元素共行显示
2 不可以手动调整宽高大小
3 实际大小由元素的内容多少决定
常见行内元素： span label i b s a sup sub strong
3 行内块元素：
特点：
1 可以共行显示
2 可以手动调整宽高
常见的行内块元素 img input button
尺寸与边框
1 尺寸
1 属性：
width height 分别设置元素的宽高大小
取值：像素值或是百分比
注意：块元素和行内块元素可以设置宽高属性
2 溢出处理
溢出处理，内容超出元素尺寸范围，称为内容溢出,默认情况下，溢出部分仍然可见
属性：overflow 可以处理内容溢出
取值：
1 visible 默认值，溢出部分仍然可见.
2 scroll 添加滚动条,包含水平和垂直方向，不管该方向有没有发生内容溢出，都显示滚动条
3 auto 自动添加滚动条
4 hidden 隐藏溢出部分
2 边框
1 边框实现：
属性：border
取值：border-width border-style border-color
边框宽度，样式，颜色，三个值缺一不可（即使有些值是默认的）
border-width :取像素值，设置四个方向边框宽度
border-style :边框样式
取值：
solid 实线边框
dashed 虚线边框
dotted 点线边框
doule 双线边框
border-color ;设置边框颜色，取颜色值
注意 ：
1 使用border 属性为元素设置边框，是同时设置 上 右 下 左 四个方向的边框
2 取消默认边框，border : none；常用于按钮
2 单边边框的设置
属性：
1 border-top :设置顶部边框
2 border-right :设置右边边框
3 border-bottom :设置底部边框
4 border-left :设置左边边框
取 值：border-width border-style boder-color
3 网页三角标制作：
1 设置空的块元素，宽度为0
2 为元素设置等宽的边框
3 调整边框颜色，显示一个方向的边框，其余边框设置透明边框颜色 transparent
注意：四个方向的边框缺一不可，缺少的话，边框会恢复成矩形边框，不再是三角形
4 轮廓线
属性：outline
取值：width style color
注意：轮廓线围绕在元素内容区域四周，与边框类似，但有区别：轮廓线在网页中不占位，边框在网页中是实际占位的
取消轮廓线：outline:none ;
5 圆角边框
1 属性：border-radius
2 取值：像素值或者百分比
1 border-radius:20px
一个值表示四个角都以20px 做圆角
2 border-radius:20px 40px
取两个值，按照上右下左顺时针方向设置圆角，从左上角开始，依次取值，在给两个值的情况下，上下保持一致，左右保持一致
3 border-radius: 10px 20px 30px ; 三个值，左右角一致，对应的角值是一致
3 百分比取值实现元素形状改变
border-radius;50%;
注意：使用百分比设置圆角边框时，是参照当前元素的尺寸进行计算的
如果元素本身是长方形，设置50%的圆角会变成椭圆
如果元素本身是正方形，会变成正圆
6 盒阴影
属性：box-shadow
取值：
offset-x 阴影的水平偏移距离，取像素值
offset-y 阴影的垂直偏移距离，取像素值
blur 阴影的模糊程序，取像素值，值越在越模糊
spread 阴影的延伸距离（可选），取像素值，可以扩大阴影的范围
color 设置阴影颜色（默认为黑色）
注意：不管是浏览器窗口中还是元素本身，都存在坐标系，都以左上角为（0，0）点，向右，向下代表x 和y 轴的正方向
5 盒模型（框模型）
1 在css中。认为一切元素都是框，都是矩形区域
盒模型：计算元素在文档中的实际占位情况
副模型组成：margin(外边距) border
padding(内边距) content(元素的宽高尺寸)
元素在文档中实际尺寸的计算：
默认情况下：
最终宽度 = 左右外边距+ 左右边框宽度+左右内边距+width
最终高度 = 上下外边距 + 上下边框 + 上下内边距 + height
2 margin
1 margin表示外边距：元素边框与其他元素边框之间的距离
2 取值：像素值
1 .margin :10px
表示设置上右下左四个方向都为10px的外边距
2 margin:10px 20px
表示设置上下外边距为10px，左右外边距为20px;
3 margin:10px 20px 30px;
表示上右下左四个方向上的外边距分别为：
10 20 30 20
4 margin: 10px 20px 30px 40px;
分别设置四个方向的边距值
3 单方向外边距的设置
1 属性：
1 margin-top:上方外边距
2 margin-right:右边的外边距
3 margin-bottom: 底部外边距
4 margin-left:左边外边距
2 取值：像素值
只给当前方向设置外边距，给一个值
4 特殊取值：
1 。margin:0; 设置元素外边距为0 ，常用于初始化页面样式，取消一些元素的默认外边距
2 。margin:0 auto;设置左右外边距自动，用来实现元素的居中效果。auto只对左右外边距起作用
3 。取负值：
会移动元素的位置，负值表示向上向左移动元素，常用于页面元素位置的微调
5 自带默认外边距的元素：
body h1-h6 p ul ol
css二
CSS指层叠样式表，是应用于结构层的表现形式，CSS要应用于结构层必须与结构层建立起连接，此连接按照与结构层中所要格式化元素的远近分为外联样式、嵌入样式和内联样式，三者同时使用时遵循就近原则。一、外联样式：将... 查看详情
css
css 层叠样式表修饰网页的 一、css的语法： 1.行内样式的语法 2.内部样式表和外部样式表的语法二、css的使用方式 1.行内样式 2.内部样式表 3.外部样式表 4.外部导入样式三、css选择器 ID选择器 class选择器 标签选择... 查看详情
002：css基础
一：CSS1：CSS(CascadingStyleSheets) 层叠样式表（级联样式表） 2：引入CSS样式表（书写位置） 行内样式表、内部样式表、外部样式表3：css声明、标签引用。 二：选择器1：标签选择器2：class选择器 .声明3：id选... 查看详情
css基础
二、css基础1、css层叠样式表 (1)、行内样式表(style属性) <pstyle=""> (2)、内部嵌入样式表(style元素) <styletype="text/ess"> body{background-color#FF0000;} .boss{} #id{} </style> (3)、外部引... 查看详情
3-24css样式表分类选择器样式属性格式布局
一、css样式表分类：（一）内联样式表：代码写在标签内的样式表 控制精确代码重用性差 优先级最高格式：<pstyle="样式属性">内容</p><divstyle="text-decoration:line-through;">第四格第三元</div> （二）内嵌样... 查看详情
web前端开发笔记——第三章css语言第一节css的基本概念和样式表(代码片段)
目录一、CSS和HTML二、CSS的基本语法格式三、CSS样式设置（一）行内样式（二）内嵌样式（三）引用外部CSS文件四、多重样式优先级结语一、CSS和HTMLCSS，又称为层叠样式表，HTML标签定义网页的内容... 查看详情
css复习笔记引入和语法
~~###CSS一、介绍CSS是层叠样式表，用于表现HTML或XML文件样式的语言。结构（html）+装饰（css）+内涵（js）二、语法语法组成选择器{规则属性：值；属性：值；}html如何引入css1.【内联样式表】将css规则直接填写在style属性中---过度... 查看详情
css引入三种选择器
css的引入方式有三种:行类样式、内部样式、外部样式表一、行内样式使用style样式引入css样式。 二、内部样式在style标签中书写css代码。Style标签写在head中。 三、外部样式表css代码保存在扩展名为.css的样式... 查看详情
第二章前端之css
...第二章、前端之css一、css介绍css（Cascading?Style?Sheet，层叠样式表）定义显示html元素当浏览器读到一个样式表，它会按照这个样式表对这个文档进行渲染二、css语法css实例每个css样式由两个组成部分：选择器和声明。声明包括属... 查看详情
css概述
1.什么是csscss:cascadingstylesheets层叠样式表，级联样式表，简称为样式表2.css作用设置html网页中元素的样式3.HTML与css的关系html：负责网页的搭建，内容的展示(素颜)css:负责网页的修饰。(亚洲四大邪术)对于元素样式的修饰，W3C建议... 查看详情
css样式
一外部样式表不需要style标签<linkrel=“stylesheet”href=“”/>二嵌入式样式表<styletype=“text/css”>p</style>三内联样式属性名为style举例:<pstyle=“”></p>选择器一 查看详情
html中css详细介绍
一、样式表的作用 1、Css样式表，层叠样式表 2、类似于人类的衣服，网页的衣服 3、作用：美化网页 4、优势： 1.内容与表现分离，便于维护 2.样式丰富，页面布局灵活 3.提高页面的访问... 查看详情
html中css详细介绍
一、样式表的作用 1、Css样式表，层叠样式表 2、类似于人类的衣服，网页的衣服 3、作用：美化网页 4、优势： 1.内容与表现分离，便于维护 2.样式丰富，页面布局灵活 3.提高页面的访问... 查看详情
html中css详细介绍
一、样式表的作用 1、Css样式表，层叠样式表 2、类似于人类的衣服，网页的衣服 3、作用：美化网页 4、优势： 1.内容与表现分离，便于维护 2.样式丰富，页面布局灵活 3.提高页面的访问... 查看详情
前端:css
一,css介绍CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。二,CSS语法1,每个CSS样式由两个组成部分：选择器和声明。声... 查看详情
css简介
一、什么是CSSCSS(CascadingStyleSheets的缩写)，翻译为“层叠样式表”或“级联样式表”，简称样式表。二、CSS的主要作用它主要是用来给HTML网页来设置外观或样式。外观或样式：HTML网页中的文字的大小、颜色、字体，网页的背景颜... 查看详情
css介绍(代码片段)
....CSS介绍二.CSS的引入方式三.CSS选择器一.CSS介绍定义:层叠样式表作用:美化界面:设置标签文字大小,颜色,字体加粗等样式控制页面布局:设置浮动,定位等样式基本语法:选择器样式规则样式规则:属性名1:属性值1属性名2:属性值2属性... 查看详情
前端之css
一、css概述CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。‘‘‘selector{property:value;property:value;property:value;,,,}‘‘‘二、css几... 查看详情