参考:cnblogs.com/yuanchenqi/articles/5977825.html
ruanyifeng.com/blog/2015/07/flex-grammar.html
jianshu.com/p/a3da5e27d22b
一.CSS概述
1.CSS概念:Cascading Style Sheets(层叠样式表)的简称
2.用途:控制网页数据的表现,可使网页的表现与数据内容分离
3.怎样找到标签;如何操作标签对象(element)
二.4种引入方式
1.行内式:在style属性中设定CSS样式
- 这种方式没有体现出CSS的优势,不推荐使用
- 将覆盖任何全局的样式设定,如在< style>标签/外部样式表中规定的样式
<div style="background-color:rebeccapurple;color:red">hello yuan</div>
2.嵌入式:将CSS样式集中写在< head>内的< style>中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{ #通过名字找到标签,操纵<p></p>
background-color:rebeccapurple;#调整字的颜色
font-size:40px#调整字体大小
}
a{
text-decoration:none;#去除下划线
}
</style>
</head>
3.链接式:通过< link>将一个.css(Stylesheet)文件引入到HTML文件中,写在< head>中
- 通过HTML层面规则(< link>的属性)引入
- 可引入任意多个文件
<link href="mystyle.css" rel="stylesheet" type="text/css">
#href规定文件路径
#rel规定文件类型(.css)
#type规定被链接文档的MIME类型,可不写
4.导入式:通过@import将一个独立的.css文件引入到HTML文件中,写在< head>内的< style>中
- 通过CSS层面规则(@import " ")引入
- 引入文件数有限制
<style type="text/css">
@import"mystyle.css"; #此处要注意.css文件的路径
</style>
#type可不写
5.导入式会在整个网页装载完后再装载CSS文件,如果网页较大则会儿出现先显示无样式的页面,闪烁一下后再出现网页的样式;链接式会在网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的
三.CSS的选择器(Selector):Selector指明了{ }中的"样式"的作用对象,也就是"样式"作用于网页中的哪些标签
对某元素的格式设置同样会应用到该元素的所有子元素上
1.基础选择器
# *:通用元素选择器,匹配任何元素
* { margin:0; padding:0; }
# E:标签选择器,匹配所有使用E标签的元素
p { color:green; }#匹配所有<p>
# .info和E.info:class选择器,匹配所有class属性中包含info的元素
.info { background:#ff0; } p.info { background:blue; }
# #if和E#id:id选择器,匹配该id的元素
#id { background:#ff0; } p#id { background:#ff0; }#这个好无聊啊,没什么用
#class和./id和#必须连在一起写,否则无效
2.组合选择器
#E,F:多元素选择器,同时匹配所有E和F元素,E和F之间用','分隔
div,p { color:#f00; }
#E F:后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
#不只匹配子元素,所有后代中存在即可
li a { font-weight:bold;}
#E > F:子元素选择器,匹配所有E元素的子元素F
#只匹配子元素,子元素中不存在就找不到
div > p { color:#f00; }
#E + F:毗邻元素选择器,匹配E元素后紧邻(中间没有其他元素)的同级元素F
div + p { color:#f00; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1>p{
background-color: aqua;
color: deeppink;
}
.main2>div{
background-color: blueviolet;
color: chartreuse;
}
</style>
</head>
<body>
<div class="div1">hello1
<div class="div2">hello2
<div>hello4</div>
<p>hello5</p>
</div>
<p>hello3</p>
</div>
<p>hello6</p>
<hr>
<div class="main2">1
<div>2
<div>
4
</div>
</div>
<div>
3
</div>
</div>
</body>
</html>
3.嵌套规则:
(1)块级元素可以包含内联元素/某些块级元素;但内联元素不能包含块级元素,只能包含内联元素
(2)有几个特殊的块级元素只能包含内联元素,不能包含块级元素,如hn,p,dt(不会报错,自动取出)
(3)li内可以包含div
(4)块级元素与块级元素并列,内联元素与内联元素并列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[suoning]{
color: blueviolet;
}
.he>div{
color: bisque;
}
</style>
</head>
<body>
<div class="he">111
<p class="fr">222
<div>333</div>
</p>
<div>444</div>
</div>
***************************
<div suoning="sb">ddd
<p>pppp</p>
</div>
<p suoning="sb2">ddd2
<p>pppp2</p>
</p>
</body>
</html>
4.属性选择器
#[att]:匹配所有具有att属性的E元素,不考虑它的值
[title] { color:#f00; }
#ele[att]:匹配ele标签中所有具有att属性的E元素,不考虑它的值
p[title] { color:#f00; }
#E[att=val]:匹配所有att属性等于"val"的E元素
div[class=”error”] { color:#f00; }
#E[att~=val]:匹配所有att属性有多个空格分隔的值,其中一个值等于"val"的E元素
td[class~=”name”] { color:#f00; }
#E[attr^=val]:匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;}
#E[attr$=val]:匹配属性值以指定值结尾的每个元素
div[class$="test"]{background:#ffff00;}
#E[attr*=val]:匹配属性值中包含指定值的每个元素
div[class*="test"]{background:#ffff00;}
5.伪类(Pseudo-classes):用来给选择器添加一些特殊效果
(1)anchor伪类:专用于控制链接的显示效果
#a:link{}:没有接触过的链接,定义了链接的常规状态
#a:hover{}:鼠标放在链接上的状态,产生视觉效果
#a:visited{}:访问过的链接;用于判断已访问过的链接
#a:active{}:在链接上按下鼠标时的状态,表现鼠标按下时的链接状态
#伪类选择器:伪类指的是标签的不同状态:
a==>点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
<a>即为超链接标签
<html>
<head>
<style type="text/css">
a:link{color: red;}
a:visited {color: blue;}
a:hover {color: green;}
a:active {color: yellow;}
.box:hover .top{color: red}#只让top适用
</style>
</head>
<body>
<a href="01-hello-world.html">hello-world</a>
<div class='box'>
<div class='top'><div>
<div class='bottom'><div>
<div>
</body>
</html>
(2)anchor伪类用于< a>之外的其他标签:
标签:伪类名称{css代码;}
标签1:伪类名称 标签2{css代码}==>对1执行操作,2产生变化
/*控制盒子的一部分(2必须是1的子标签)*/
标签1:伪类名称+标签2{css代码}==>对1执行操作,2产生变化/*别用*/
/*控制邻居(2是紧邻在1之后的同级标签)*/
可以通过class值/标签名称/id值选择标签
<html>
<head>
<style type="text/css">
.top:hover{color: red}/*放于top,top变化*/
.box:hover .top{color:red}/*放于box,top变*/
</style>
</head>
<body>
<a href="01-hello-world.html">hello-world</a>
<div class='box'>
<div class='top'><div>
<div class='bottom'><div>
<div>
</body>
</html>
(3)before after伪类:在指定标签(同一行的)前/后添加内容
#标签:before
p:before {content='插入的内容'}/*在每个<p>元素之前插入内容*/
p:before{content:"hello";color:red}
#标签:after
p:after {content='插入的内容'}/*在每个<p>元素之后插入内容*/
p:after{ content:"hello";color:red}
6.css优先级和继承
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Title<title>
<style>
.div3 {color:red;}/*优先级10*/
.div1 .div3 {color:chartreuse;}/*优先级20*/
#div1 .div3 {color:rebeccapurple;}/*优先级110*/
.div3 {color:green!important;}/*直接使用本声明*/
</style>
</head>
<body>
<div class='div1'>
<div class='div2'>
<div class='div3'>嵌套优先级</div>
</div>
</div>
<div class='div1' id='id1' style='color:green'>优先级</div>
</body>
</html>
(1)优先级:CSS样式在浏览器中被解析的先后顺序
#样式表中的特殊性描述了不同规则的相对权重,基本规则是:
1.内联样式表的权值最高 style=""==>1000
2.统计选择符中的ID属性个数 #id==>100
3.统计选择符中的CLASS属性个数 .class==>10
4.统计选择符中的HTML标签名个数 div==>1
#文内的样式优先级高于外部定义:
#这里文内样式指形如<div style="color:red">blah</div>的样式
#外部定义指经由<link>/<style>卷标定义的规则;
#按这些规则将数字符串逐位相加,就得到最终的权重
#然后在比较取舍时按照从左到右的顺序逐位比较
标签 {css代码!important}
#优先级最高,直接使用该规则
#important声明冲突时比较优先级
#如果优先权一样,则按在源码中出现的顺序决定,后来者居上
#由继承得到的样式没有优先级计算,低于一切其它规则,任何显式申明的规则都可覆盖继承样式
(2)继承性:一种机制,允许样式不仅可以应用于某个特定元素,还可应用于其后代
- 是CSS的一个主要特征,依赖于祖先-后代的关系
- CSS继承性的权重非常低,任何显式申明的规则都可覆盖其继承样式
div{border:1px solid #222}
<div>hello
<p>yuan</p>
</div>
CSS继承也是有限制的,有一些属性不能被继承,如:border/ margin/padding/background
四.CSS的常用属性
1.颜色属性:
<div style='color:颜色名'>
<div style="color:blueviolet">ppppp</div>
##########################################################
<div style='color:颜色的16进制编号'>
<div style="color:#ffee33">ppppp</div>
##########################################################
<div style='color:rgb(红,绿,蓝)'>
#通过RGB调色,3个参数范围均为[0,255]
<div style="color:rgb(255,0,0)">ppppp</div>
<div style='color:rgba(红,绿,蓝,透明度)'>
#透明度范围为[0,1];0为完全透明,1为完全不透明
<div style="color:rgba(255,0,0,0.5)">ppppp</div>
RGB颜色(编号)查询对照表:114la.com/other/rgb.htm
2.字体属性:
文字大小:font-size:像素/百分比/提供的值
font-size:20px/50%/larger
文字字体:font-family:数值/提供的值
font-family:'Lucida Bright'
文字粗细:font-weight:数值/提供的值
font-weight:900/lighter
文字风格:font-style:normal/italic/oblique/inherit
#依次为:标准(默认值)/斜体/倾斜/从父元素继承
font-style:oblique
italic和oblique区别:
blog.csdn.net/weixin_41355260/article/details/90369221
3.背景属性:
背景颜色:background-color:颜色
background-color:cornflowerblue;
背景图片:background-image:url('path')
background-image:url('1.jpg');
背景图片是否平铺:background-repeat:提供的值
#依次为:repeat平铺满(默认值)/no-repeat不平铺/repeat-x横向铺满/repeat-y纵向铺满
background-repeat:no-repeat;
背景图片位置:background-position:横向位置 纵向位置
#使用该属性时background-repeat:no-repeat
#两位置均可为负数
#横向:px数(距左边框)/left center right
#纵向:px数(距上边框)/top center bottom
background-position:center center;
简写:background-position:center
background-position:right top(20px 20px);
简写:background-position:20px 20px
简写:background:no-repeat 0 -100px url('1.jpg');
<body style="background:20px 20px no-repeat #ff4 url('1.jpg')">
#如果将背景属性加在body上,要给body加height=,否则结果异常(body为空,无法撑起背景图片)
#另外,如果此时设置width=100px,也看不出效果,除非设置出html
<div style="width:300px;height:300px;background:20px 20px no-repeat #ff4 url('1.jpg')">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{background-color: antiquewhite;}
body{
width: 100px;
height: 600px;
background-color: deeppink;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
display:inline-block;/*内联标签=>块级标签*/
/*不独占一行,但可设定width/height;具体见下*/
width:18px;
height:20px;
background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
background-position: 0 -100px;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</body>
</html>
4.文本属性:文本过多会导致从本行溢出,写在下一行
文字大小:font-size:像素值
font-size:200px;
横向位置:text-align:提供的值
text-align:center;
文本行高:line-height:像素值/基于字体大小的百分比
#即文字高度加上文字上下的空白区域的高度
line-height: 200px/50%;
?元素内容的垂直对齐方式:vertical-align:-4px
#只对行内元素有效;对块级元素无效
首行缩进:text-indent:像素值
text-indent:150px;
字符间距:letter-spacing:像素值
letter-spacing:10px;
单词间距:word-spacing:像素值
#仅对英文等语言有效;单词按空格分割
word-spacing:20px;
文本转换:text-transform:提供的值
text-transform:capitalize;/*每个单词首字母大写*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer .item {
width:300px;
height:200px;
background-color:chartreuse;
display:inline-block;
}
</style>
</head>
<body>
<div class="outer">
<div class="item" style="vertical-align: top">ll
</div>
<div class="item">
</div>
</div>
<script>
</script>
</body>
</html>
5.边框属性:每个标签可视为一个盒子,有边界但默认不可见,边框即为该边界
border-radius:cnblogs.com/goloving/p/7648535.html
边框线条样式:border-style:提供的值
border-style:solid/dashed;/*实线/虚线*/
边框线条颜色:border-color:提供的值
border-color:chartreuse;
边框线条粗细:border-width:像素值
border-width:20px;
边框圆滑度:border-radius:百分比/像素值
/*越大越接近圆形;默认为0*/
/*百分比指占总边长的比例,>=50%时均为圆*/
/*实质是控制角所在圆的半径(每个角是1个1/4(椭)圆弧)*/
/*4值:左上,右上,右下,左下;3值:左上,右上+左下,右下;2值:左上+右下,右上+左下;1值:全部*/
/*值可写为:value11 value12.../value21...形式,分别控制各角的水平/垂直半径*/
border-radius:5%
border-radius:5px 10px 5px 15px
border-radius:10px 20px 30px 40px/20px 50px 30px 10px
/*简写:*/
border:30px rebeccapurple solid;/*必须写全*/
/*单独控制某边边框:*/
border-top/bottom/left/right:30px purple solid;
/*单独控制某边边框某属性:*/
border-top/bottom/left/right-属性:value/*优先级高于border(-属性)*/
/*单独控制某角圆滑度:*/
border-top-left/top-right/bottom-right/bottom-left-radius:value
6.列表属性:
列表标签:list-style:提供的值
#即ul的·/ol的序号
list-style:decimal;#数字
list-style:none;#无
list-style:circle;#seoul圆圈
list-style:lower-latin;#小写英文字母
list-style:square;#方形点
7.dispaly属性:
隐藏该元素:display:none
#不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到
变为块级标签:display:block
变为内联标签:display:inline
变为块级-内联标签:display:inline-block
#可设置width/height,又不独占一行
inline-block 的间隙:两个inline-block间默认有间距(每个浏览器大小不同)
解决:
1.margin:-3px
布局中有很多元素,每个都添加margin维护成本过大
线上代码如果压缩,会造成布局混乱
2.给几个标签加一个父级div
div{word-spacing: -5px;}
8.元素属性:
(1)margin属性:外边距(控制元素与元素间距离,即元素周围空间的间隔,视觉上达到相互隔开的目的)
margin:值
#负值合法;默认为0
auto:浏览器计算外边距
margin:0 auto:居于父标签的正中
length:以具体单位计的外边距值
#单位可为像素/厘米等;默认为0px
x%:基于父元素宽度的百分比的外边距
inherit:从父元素继承外边距
margin:上 右 下 左
margin:上 左&右 下
margin:上&下 左&右
margin:四边
margin-top/bottom/left/right:控制单边margin
边框默认定位于浏览器窗口的左上角,但并非紧贴着浏览器的窗口的边框,这是因为浏览器默认会给< body>加上一个margin(取决于浏览器) :
#解决:
body{margin: 0;}
margin collapse(边界塌陷/边界重叠):
- 只在普通流文档的上下外边距产生,左右外边距不产生
- 意义:设想上下排列一系列规则的块级元素(如< p>)时,块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离
1兄弟div:上面div的margin-bottom和下面div的margin-top会塌陷
取上下两者margin里的最大值作为显示值
2父子div:如果父div中border/padding/content均没有
子div的margin会一直向上找,直到找到某个标签A包括中的一个
然后按A定位
如果一直没找到,按body定位
掠过父div后,子div与叔div按兄弟div发生margin collapse
#解决:
1:border:1px solid transparent
2:padding:1px
3:over-flow:hidden;
(2)padding属性:内边距(又叫填充,控制内容与边框间距离)
padding:值
#负值不合法;默认为0
length:以具体单位计的填充值
#单位可为像素/厘米等;默认值为0px
x%:基于父元素的宽度的百分比
inherit:从父元素继承padding
padding:上 右 下 左
padding:上 左&右 下
padding:上&下 左&右
padding:四边
padding-top/bottom/left/right:控制单边内边距
(3)border属性:围绕在内边距和内容外的边框(见边框属性)
(4)content:盒子里的内容,显示文本和图像
(5)元素的width和height:
- 当指定元素的width和height时,只是设置内容区域的宽度和高度;要知道完全大小的元素,还必须添加填充padding/边框border/边距margin
- 元素总宽度=width+padding-left/right+margin-left/right +margin-left/right
- 元素总高度=height+padding-top/bottom+margin-top/ bottom+margin-top/bottom
五.快写
div tab
a tab
div.main>ul>li.c*4 tab