css叫做层叠样式表，继承：子元素会继承父，元素的某些样式，因为有些子元素本身就有默认值，所以它就不会用父元素
层叠：子元素如果定义了与父元素相同的样式，则会覆盖掉父元素的样式，***后面的样式会覆盖掉前面的样式。
f1.外部样式，把css样式的代码写在独立的文件中，<link href="href.css" rel="stylesheet" type="text/css">
2.css样式的使用方法的区别：
| 类别 | 引入方法 | 位置 | 加载 |
| 行内样式 | 开始标签内style | html文件内 | 同时 |
| 内部样式 | <head>中<style>内 | html文件内 | 同时 |
| 链入外部样式 | <head>中<link>引用 | .css样式文件与.html文件分离 | 页面加载时，同时加载css样式 |
| 导入式@important | 在样式代码最开始处 | .css样式文件与.html文件分离 | 在读取完html文件之后加载 |
css和html样式分离，多个文件可以使用同一个样式的文件夹，多文件引用同一个css文件，css只需下载一次。
4.选择器（标签选择器，全局选择器，类选择器，群组选择器，ID选择器，后代选择器）
全局选择器：*{ color:blue;.......}
后代选择器：<p><em>css</em>层叠样式表</p> p em{font-size:40px},后代选择器之间用空格隔开,eg:p.red a em{...}class为red的p标签中的a标签中的em
5.链接伪类
链接的4中的状态：激活状态active，已访问的状态visited，未访问的状态link，和鼠标悬停的状态hover.
伪类的链接的顺序：link> :visited >:hover>:active 其中a:hover必须置于a:link,a:visited之后才有效，a:active必须置于a:hover之后才有效。
6.css样式的命名，采用英文字母，数字，以及“-”和“_”命名，以小写字母开头，命名形式单字，连字符，下划线和驼峰法，要使用有意义的命名。
常用的css样式的命名：
1）页面结构
页头：header 导航：nav 页面主体：main 侧栏：sibebar 页尾：footer 栏目：column 内容：content/container
页面外围控制：wrapper 内容：container 左右中：left right center
2)导航
导航：nav 左导航：leftsidebar 主导航：mainnav 右导航：rightsidebar 子导航：subnav 菜单：menu
顶导航：topnav 子菜单：submenu 边导航：sidebar 标题：title 摘要：summary
3)功能
标志：logo 注册：register 广告：banner 搜索：search 登录：login 功能区：shop 登录条：loginbar 标题：title
7.id 和class 使用
id 不要滥用，谨慎使用，适当使用class，类选择器好比人的名字，可以多人使用，id选择器好比人的身份证有且只能使用一次，
不同于类选择器，id选择器不能结合使用，id主要是为了js准备的。
8.css的优先级的使用
！important 声明稿，其中css使用方法的优先级，行内样式>内部样式>外部样式
样式表中的优先级，id选择器>class选择器>标签选择器>通配符
权值相同，就近原则，权值不同的使用权值高的。
9.字体样式
font-family中设置多个字体，如果都没有将会使用浏览器默认的字体。
font-size:文字大小，有绝对单位和相对单位(em,%)；绝对单位（px）。不能随浏览器分辨率或者父元素大小的改变而改变。
其中em和%都是针对父元素。如果当前的行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
color:定义元素内文字的样式。
font-weight:为元素设置粗细
font-style:normal|italic|oblique，为元素内文字设置样式
font-variant:设置元素中文本为小型大写字母
font-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|长度|百分比
word-spacing:设置元素内单词之间的间距
letter-spacing:元素字符之间的间距
text-transform:capitalize|uppercase|lowercase|none，设置的元素内文本的大小
text-decoration:underline|overline|line-though|blink|none设置元素内文本的装饰
text-indent:设置文本中的缩进，可以为负值
text-align:文本的对齐方式
white-space:normal[自动换行】，pre[换行和空白受保护】nowrap[强制在同一行显示】
vertical-align:sub[设置文字为下标】，super[设置文字为上标】，top[把元素的顶端与行中最高元素的顶端对齐】，text-bottom把元素的底端与父元素字体的低端对齐。
选择器{font:font-style font-weight font-size/line-height font-family}
设置字体的顺序的时候，将英文字体设置在前，中文字体设置在后
如果想让文字在垂直方向上，居中，将行高设置为元素的高度，行高=元素的高度，文字的内容不能超过元素的宽度，元素的高度也就是不能换行。
10.浏览器有默认的行高，不同浏览器的默认的行高是不一样的。字体合写的语法的规则,为了css的代码的优化，建议所有的属性值之后都添加";",某些xhtml标签，有自己默认的css属性值，为了兼容主流浏览器，建议我们在设置的时候，将所有的css属性重置为标准的。
11.css盒子模型
盒子有以下的几部分内容构成：
1盒子的内容，content 2盒子的边框 3 盒子的边框和内容之间的填充，称为paddiing,内边距
4.多个盒子存在，盒子与盒子之间的距离，称为边界margin，外边距
盒子所在的实际宽度=左右边界+左右边框+左右填充+内容宽度
控制元素的尺寸：
width,height,margin,padding(上 右 下 左）
border-top-width:设置边框的额粗细
brder-top-style:设置边框的样式
border-top-color:设置边框的颜色
设置边框的样式：border:线宽 线形 颜色
由于各个浏览器存在内外边距默认值的不同，我们需要把各个内边距归为从零开始计算。我们工作中用到了哪一个元素，就把哪一个元素的默认值归为零。
css的属性中，虽然有继承的特点，但并不是所有的属性都有继承
css小技巧：让盒子水平居中，将对象的左右边界设置为auto,让盒子的内容垂直居中，设置行高=盒子的高度，但是不要有换行，我们在调试的时候可以适当添加背景颜色。
12.css inherit属性的操作，其中inherit相当于指定元素从它的父元素继承属性。
扫一扫
3245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
