一、CSS
cascading style sheet层叠样式表
html负责网页的搭建，内容的展示；css负责网页的修饰
w3c建议使用css的方式取代html属性
二、CSS语法规范
1.css使用方式
(1)行内样式(内联样式)
将样式写在元素的style属性内
style="color:red;background:blue"
代码没有可重用性,没有可维护性.内联样式优先级最高
(2)内部样式
在head中使用style定义
< head>
< style>
选择器{样式}
</ style>
< /head>
(3)外部样式
单独创建一个.css文件,在html文件中的head中使用link引入这个文件
< link rel="stylesheet" href=" 01.css">
2.CSS样式的特性
(1)继承性
大部分的css效果是可以直接被子元素继承的
在f12内有inherent from 父元素可以看到继承了哪些属性
尺寸宽高,内外边距等不被继承;a标签的颜色不被继承
(2)层叠性
可以为一个元素定义多个样式,样式属性不冲突的时候,可以同时作用到这个元素上;样式冲突时按照css默认优先级显示
(3)优先级
当属性发生冲突时,根据优先级应用样式
默认优先级:内联样式>内部外部样式>浏览器默认样式(inherient from html)
从上往下优先级降低
(4)调整优先级
!important
放在属性之后,分号;之前,与值用空格分开
优先级比内联样式还高
三.基础选择器
(1) 通用选择器 *{}
常用于css reset *{margin:0;padding:0}
(2) 元素选择器(标签选择器)
div/p/h1...{}
页面中所有对应元素都应用这个样式
(3) id选择器
id值{}
(4) 类选择器
①必须有点;②
**(4.1) 多类选择器:**
.class值{}
一个元素可以引用多个类选择器,定义好类选择器以及样式,哪个元素要用就直接调用
**(4.2) 分类选择器:**
①元素.类名1.类名2{}(类名1和类名2之间无空格)
②元素.类名{}
(5) 群组选择器
选择器1,选择器2......{}
(6)后代选择器
选择器1 选择器2 选择器3 ...{}
通过元素的后代关系匹配元素,只要后代是就行,不管是儿子还是孙子
(7)子代选择器
选择器1>选择器2...{}
只管儿子,不管孙子
(8)伪类选择器
以:开头.用于匹配不同状态的选择器
**(8.1)** 匹配未访问的链接
选择器:link{}
**(8.2)** 匹配访问后的链接
选择器:visited{}
**(8.3)** 匹配鼠标悬停的状态
选择器:hover{}
**(8.4)** 匹配元素激活的状态,鼠标按住元素不抬起
选择器:active{}
当这四个伪类同时作用在一个元素上时,需要严格编写顺序
**L** O **V** E & **H** **A**TE
**(8.5)** 获取焦点时改变元素的状态
:focus
(9)选择器权值问题
!import >1000
内联样式=1000
id选择器=100
class和伪类=10
元素标签选择器=1
*通用选择器=0
继承的样式 无权值
总结:
①当一个选择器含有多个选择器时,需要将所有的选择器权值进行相加,然后比较,权值最大优先显示
②群组选择器权值单独计算不能相加
③样式后面加!important直接获取最高优先级
④选择器权值的计算,不会超过自己的最大数量级(1不大于9,10不超过99)
四.尺寸和边框
1.尺寸
尺寸的属性:
****
**height:**
**max-**
当max-100%表示当前元素默认尺寸的大小.当用于图片,表示能缩小,但是最大只能显示原始尺寸
**min-**
**max-height:**
**min-height:**
取值:px/%
**单位(附加):**
**①绝对单位**
*px* 像素
*in* 英寸 1英寸=2.54cm
*pt* 磅 1磅=1/72in
*cm* 厘米
*mm* 毫米
**②相对单位**
*%* 百分
*em* 以父元素的数值当基本单位
*rem* 以html的数值当基本单位16px
默认可以设置尺寸的元素
**块级元素:** 不设置宽,默认宽度是父元素的100%,不设置高,默认高是靠内容撑开.设置宽高有效.
**行内元素:** 宽高靠内容撑开,设置宽高无效
**行内块(input):** 默认自带宽高,不同浏览器解析不同.设置宽高有效.
2 溢出效果的处理
溢出:当内容较大,元素区域较小的时候,就会发生溢出.默认是纵向溢出效果
**overflow:**
*取值:*
visible:可见(默认的)
hidden:溢出部分隐藏
scroll:不管是否溢出,x,y轴都加滚动条
auto:溢出才有滚动条,不溢出就没有
overflow-x:水平轴滚动条
overflow-y:垂直滚动条
如何设置横向溢出?
内部容器设置宽度大于父元素的宽度
3 边框
(1)边框的属性:
border-color: 颜色
border-style:样式**solid**/dotted(点点)/dushed(短线)/double(双实线)
border-宽度
简写:**border:color style width**
最简写方式:**border:style**
border:0清除边框
(2)边框单边定义
**border-top/right/bottom/left**
(3)边框单属性定义
**border-top/right/bottom/left-color/style/**
(4)单属性定义
border-color/style/