01-选择器、基础属性、显示模式、三大特性
css概念
CSS 指层叠样式表(Cascading Style Sheets)（级联样式表）
CSS是用来美化html标签的，相当于页面化妆。
样式表书写位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
选择器是一个选择谁（标签）的过程
选择器{
属性：值：
属性：值；
}
属性
width:20px; 宽
height:20px; 高
background-color.red; 背景颜色
font-size:24px; 字体大小
text-align:left lcenterl right 内容的水平
text-indent:2em, 首行缩进
color:red; 文字颜色
基础选择器
标签选择器
1 标签在{属性：值；}
特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。
类选择器（重点）
.自定义类名，{属性：值； 属性：值；}
特点：
谁调用，谁生效。
一个标签可以调用多个类选择器。
多个标签可以调用同一个类选择器。
类选择器命名规则：
不能用纯数字或者数字开头来定义类名
不能使用特殊符号或者特殊符号开头(_)来定义类名
不建议使用汉字来定义类名
不推荐使用属性(css关键字）或者属性的值来定义类名
关键字：
凡是被css语言所定义过的词语就叫做关键字
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
10选择器
#自定义名称（属性：值；3
特点：
一个id选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。
一个标签只能调用一个id选择器。
一个标签可以同时调用类选择器和id选择器。
通配特选择器
*{属性：值；}
特点：
给所有的标签都使用相同的样式。
颜色的显示方式
直接写颜色的名称
o red、blue、orange等十六进制显示颜色0-9 a-f
前2为代表红色，中间2位代表绿色，后边2位代表蓝色。
#000000；
rgb
O
rgb(120, 120, 120)
rgba
O a代表alpha不透明度 值0-1
O rgba(120, 120, 120, 0.5)
复合选择器
概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。
交集选择器
标签+类(ID)选择器（属性：值；
特点：即要满足使用了某个标签，还要满足使用了类( id) 选择器。
<style>
/* 标签选择器 */
p {
font-size: 20px;
color: red;
}
.text1 {
color: blue;
}
.text2 {
font-size: 30px;
color: pink;
}
/* 类选择选择器 的优先级 高于标签选择器
在style 标签中是一个.
在标签中是class
一个标签可以使用多个类选择器 如果使用多个类选择器 需要用空格进行分开
多个标签也可以使用同一个类选择器
*/
/* ID选择器 # ID选择器权重比class要高*/
/* ID选择器 一个标签只能调用一个ID */
/* 一个ID选择器在一个页面只能使用一次 */
/* 如果多个标签调用同一个ID 虽然会执行 但是不符合W3C规定 */
#h1 {
color: red;
}
#h2 {
color: blue;
}
* {
color: rgb(112, 0, 187);
font-size: 80px;
}
</style>
</head>
<body>
<p>这是P1</p>
<p class="text1 text2">这是P2</p>
<p class="text1">这是P3</p>
<p id="h1" class="text2">这是H1标签1</p>
<!-- <h1 id="h1">这是H1标签2</h1> -->
<div>div 标签 没有类选择器</div>
<span>span 标签 没有类选择器</span>
</body>
后代洗择器（重点）
选择器+空格+选择器{属性：值；}
后代选择器首选要满足包含（嵌套）关系。父集元素在前边，子集元素在后边。
特点：
无限制隔代。
只要能代表标签，标签、类选择器、id选择器自由组合。
子代选择器
选择器>选择器{属性：值}
并集选择器
选择器+，+选择器+，选择器{属性：值；}
属性选择器
其特点是通过属性来选择元素，具体有以下5种形式：
1. E[attr]表示存在attr属性即可
div「class1」{}
2. E[attr=val]表示属性值完全等于val
divIclass=mydemo] {}
3. ELattr*=val]表示的属性值里包含val字符并且在“任意”位置
div[class*=mydemo]{}
4.E[attrr^=val]表示的属性值里包含val字符并且在“开始”位置
div[class^=mydemo]{}
5. ELattrs$=val]表示的属性值里包含val字特并且在“结束”位置
div[class$=demos]{}
链接伪类
a:linki属性：值；； af属性：值）效果是一样的。
a:linki属性:值;； 链接默认状态
a:visitedi属性:值；； 链接访问之后的状态
athoverf属性:值；； 鼠标放到链接上显示的状态
a:activef属性：值； 链接激活的状态
:focus属性:值；子获取焦点
文本元素属性
font-size:16px;em文字大小
font-weight:700；从100-900，文字粗细，不推荐使用(font-weight:bold;)
font-family:微软雅黑(Lobster-Reqular);
文本的字体
font-style: normal / italic;
normal 默认值 italic 斜体
line-height:行高
文本属性连写
font:font-style font-weight font-
size/line-height font-family;
注意：
font:后边写属性的值。一定按照书写顺序。文本属性连写文字大小和字体为必写项。font:italic 700 16px/40px 微软雅黑，
文字的表达方式
Div {
font-family:微软雅黑((Lobster-Reqular)；
font-size:60px;
文本修饰
text-decoration:none
underline line-through
样式表书写位置
内嵌式写法
<head>
<style type="text/css">样式表写法</style></head>
外链式写法
写在head里,<link rel="stylesheet" href="1.css">
<!-- 外链式写法 -->
<link rel="stylesheet'"href="1.css">
行内样式表
<!-- 行内样式表 -->
<h1 style="font-size:30px;color:red:">h1标题</h1>
三种写法特点
内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。推荐使用
行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。（不推荐使用）
标签分类（显示方式）
块元素
典型代表, div, h1-h6, p, ul, li
特点：
独占一行
可以设置宽高
嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
行内元素
典型代表 span , a, , strong, em, del, ins
特点：
在一行上显示
不能直接设置宽高
元素的宽和高就是内容撑开的宽高。
行内块元素（内联元素）
典型代表 input img 特点：在一行上显示
可以设置宽高
块元素、行内元素转换
块元素转行内元素
/*块元素转换为行内元素*/
div, p{
display: inline;
}
行内元素转块元素
/*行内元素转换为块级元素*/
Span{ display: block;
}
块和行内元素转行内块元素
div, a, span, strong{
display: inline-block;}
css三大特性
层叠性
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码。和标签调用选择器的顺序没有关系。
继承性
继承性发生的前提是包含（嵌套关系）
★文字颜色可以继承
★文字大小可以继承
字体可以继承
★字体粗细可以继承
文字风格可以继承
★行高可以继承
总结：文字的所有属性都可以继承。
特殊情况：
h系列不能继承文字大小。a标签不能继承文字颜色。
优先级
默认样式<标签选择器<类选择器<id选择器<行内样式
<!important
10
100
1000
1000以上
优先级特点
继承的权重为0
权重会叠加
背最属性
背景基本属性
background-color
背景颜色
background-image
背景图片
background-repeat repeat（默认）I no-repeatl repeat-x I repeat-y
背景平铺
background-position left I right I center I top I
bottom
背景定位
background-position: right;
。 方位值只写一个的时候，另外一个值默认居中。
background-position: right bottom;
O 写2个方位值的时候，顺序没有要求。
background-position:20px 30px;
O 写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。
background-attachment:scroll I fixed
O
背景是否滚动
02-盒子模型与布局
1.行高
浏览器默认文字大小：16px
行高：是基线与基线之间的距离
行高=文字高度+上下边距
上边距
下边距
一行文字行高和父元素高度一致的时候，垂直居中显示。
1.1行高的单位
行高单位 20px 2em 150% 200% 2
文字大小 20px
1.2EM特点
1. em的值并不是固定的；
2.em会继承父级元素的字体大小。
em是以字为单位，1em是占一个字符的宽度，大小随着字符的字号而变化。
px是像素，是对所有浏览器都显示为一样大小的。
2盒子模型
div (
display: block;
2.1边框 borden
border-top-style solid（实线） dotted（点线） dashed（虚线）
border-top-color 边框颜色
border-top-width 边框粗细
.box{
width:300px;
height:390px;
background:#999
border-top-style:solid;
border-top-color: red
border-top-width:5；
border-bottom-style:dashed;
border-bottom-color:green;
border-bottom-width:10px;
边框属性的连写
特点：没有顺序要求，线型为必写项。
/*边框属性连写*/
border-top:red solid 5px;
四个边框值相同的写法
border:12px solid red;
特点：没有顺序要求，线型为必写项
2.2内边距
padding-left I right I top I bottom
.boxf
padding-left:20px;
padding-right:30px;
padding-top:40px
;padding-bottom:50px;
width:500px;
height:300px;
background: red;
padding连写
o padding:20px；上右下左内边距都是20px
o padding:20px 30px; 上下20px 左右30px
O padding: 20px 30px 40px；上内边距为20px左右
内边距为30px 下内边距为40
o padding: 20px 30px 4Opx 50px;上20px右30px
下40px 左 50px
内边距撑大盒子的问题
O 内边距影响盒子的宽度
O 边框影响盒子的宽度
盒子的宽度=定义的宽度+边框宽度+左右内边距
继承的盒子一般不会被撑大
包含（嵌套）的盒子，如果子盒子没有定义宽度，给子
盒子设置左右内边距，一般不会撑大盒子。
2.3外边距
margin-left I right I top I bottom
.box{
width:300px;
height:300px;
background:#eee
margin-left:20px
margin-right:30px
margin-top:40px;
margin-bottom:50px;
margin:20px 30px 40px
}margin:20px;
下左右外边距20PX
O margin:20px 30px;
上下20px 左右30px
margin:20px 30px 40px;
上20px 左右30px 下 40px
o margin:20px 30px 4Opx 50px;
上20px 右30px 下40px 左50px
垂直方向外边距合并
O 两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
嵌套的盒子外边距塌陷解决方法。
1.给父盒子设置边框
2.给父盒子 overflow:hidden; （隐藏溢出）
行内元素可以定义左右的外边距，上下会被忽略掉
3 文档流（标准痛）
元素自上而下，自左而右，块元素独占一行，行内元素
在一行上显示，碰到父集元素的边框换行。
4浮动布局
float: left I right 特点：
·元素浮动之后不占据原来的位置（脱标）
浮动的盒子在一行上显示
行内元素浮动之后转换为行内块元素。
o （不推荐使用，转行内元素最好使用display:inline-block
4.1浮动的作用
文本绕图
制作导航
网页布局
4.2 清除浮动
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。
清除浮动不是不用浮动，清除浮动产生的不利影响。
清除浮动的方法
clear: left I right Iboth
工作里用的最多的是clear:both;
O 额外标签法
在最后一个浮动元素后添加标签
2
<div class="main">
<div class="content">
</div>
3
<div class="sidebar">
</div>
我
4
5
</div>
</div>
<!-- 额外标签法 -->
<div style="clear: both;">
给父集元素使用overflow:hidden;
1如果有内容出了盒子，不能使用这个方法。
二
.mainf
background：#eee； margin:10px 0;
overflow:hidden;
伪元素清除浮动 推荐使用
<style>
.clearfix:afterf
content:"":
display:block;
height:0;
line-height:0;
visibility: hidden;
clear:both;
</style>
</head>
<body>
<div class="header"></div>
<div class="main clearfix">
</div>
<div class="left></div>
<div class="content">
<div class="content-top">
</div>
<div class="content-bot">
</div>
</div>
<div class="right"></div>
</body>
5 CSS初始化
为了考虑到浏览器兼容问题，不同的浏览器对有些标签的默认值是不同的，如果没有CSS初始化会出现浏览器之间的页面差异
淘宝
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
margin: 0;
padding: 0;
}
body,
button,
input,
select,
textarea {
font: 12px/1.5tahoma, arial, \5b8b\4f53;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
}
address,
cite,
dfn,
em,
var {
font-style: normal;
}
code,
kbd,
pre,
samp {
font-family: couriernew, courier, monospace;
}
small {
font-size: 12px;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
legend {
color: #000;
}
fieldset,
img {
border: 0;
}
button,
input,
select,
textarea {
font-size: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
6 overflow
overflow:visible
overflow:hidden
overflow:scroll
overflow:auto
默认值。内容不会被修剪，会呈现在元素框之外。内容会被修剪，并且其余内容是不可见的。
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
7定位
定位方向:left Iright Itop Ibottom
7.1静态定位。默认值，就是文档流。
position:static
position: absolute;
特点：
元素使用绝对定位之后不占据原来的位置（脱标）元素使用绝对定位，位置是从浏览器出发。
嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
嵌套的盒子，父盒子使用定位，子盒子绝对定位.子盒子位置是从父元素位置出发。
，给行内元素使用绝对定位之后，转换为行内块。
（不推荐使用，推荐使用display:inline-block;)
7.3相对定位
1．position:relative;
特点：
使用相对定位，位置从自身出发。还占据原来的位置。
子绝父相（父元素相对定位，子元素绝对定位）
行内元素使用相对定位不能转行内块
7.4固定定位
position:fixed
特点：
固定定位之后，不占据原来的位置（脱标）
元素使用固定定位之后，位置从浏览器出发。
元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display;inline-block;)
03-CSS补充知识
1.定位的盒子居中显示
★:margin:0auto；只能让标准流的盒子居中对齐。
★定位的盒子居中：先左右走父元素盒子的一半50%，
在向左走子盒子的一半(margin-left:负值。）
.nav{
width:960px;
height:60px;
background:#666;
position:absolute;
bottom:0
left:50%
margin-left:-480px;
2.标签包含规范
•div可以包含所有的标签。
令p标签不能包含divh1等标签。令h1可以包含p，div等标签。
◆行内元素尽量包含行内元素，行内元素不要包含块元素。
4.规性脱标.
尽量使用标准流
标准流解决不了的使用浮动。
浮动解决不了的使用定位，
设置盒子做外边距为auto, 将盒子冲到右边
margin-left:auto;
5.图片和文字垂直居中对齐
vertical-align对inline-block最 敏感。默认属性是：vertical-align:baseline;
img{
图片和文字垂直居中对齐
vertical-align:middle;
}
Baseline 默认。元素放置在父元素的基线上。
Sub 垂直对齐文本的下标。
Super 垂直对齐文本的上标
Tope 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低的元素的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐
%用"line-height"属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值
6.css可见性
overflow:hidden；溢出隐藏
visibilitu:hidden；隐藏元素
隐藏之后还占据原来
的位置。
displayinone; 隐藏元素 隐藏之后不占据原来的
位置。
display:block; 元素可见
display.none 和display:block 常配合is使用。
7.css之内容移除（网页优化）
使用text-indent:-5000em;
display:inline-block;
text-indent:-5000em;
将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏。
Box{}
width:300px;
height:0;
padding-top:100px;
overflow:hidden;
background:red;
8. css精灵图
.box{
width:28px;
height：20px
background:url（"精灵图导航练习/sprite.png") no-repeat -57px 0px;
position: absolute;
top:-7px;
left：50%;
margin-left:-14px;
9.emmet快捷键：
emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
9.1html:
生成结构的快捷键：
! + tab, 可以生成html5的结构代码。
生成id名和类名
标签名.类名#id名+tab
没有标签名.类名+tab ==>div 生成同级元素：
标签名+标签名+标签名“+”tab
生成子类标签
标签名>子标签名>子标签名>子标签名+tab
标签名>子标签名>子标签名>子标签名^子标签名+tab
带固定数量的标签：
ul>li*5+tab
带有序号名称
ul>li.abc$*3 + tab
生成带有内容的标签：
ul>li>afitem)*5
9.2css
width:30px==>w30+tab height:30px==>h30+tab margin:30px==>mg30+tab padding:30px==> pd30+tab
line-height:12px==>lh12px+tab
background==>bg+tab
扫一扫
731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
