CSS样式表介绍
-
css全称层叠样式表（Cascading Style Sheet）——修饰、美化网页，化妆师
css样式的多种形式
一、行间样式 -----内部样式
<div style="width: 200px;height: 200px;background: red"></div>
二、内嵌（css）样式 -----内部样式
div{
width: 200px;
height: 200px;
background: red
}
三、外链（css）样式 ------外部样式
<link rel="stylesheet" type="text/css" href="url.css">
注意：引入外部css文件时，需要设置编码 @charset="UTF-8"
样式优先级
外链css样式 < （内嵌css）样式 < 行间样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="index.css"><!--外链css--> <style> /*内嵌css样式*/ div{ width: 100px; height: 100px; background: red; } </style> </head> <body> <!--css Cascading Style Sheet 层叠样式表——修饰、美化网页，化妆师 CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。 行间样式 > 内嵌css样式 > 外链css样式（在style之前引入） --> <!--行间样式--> <!--<div style="width: 200px;height: 100px;background: blue;">1</div>--> <div>1</div> </body> </html>
css选择器
-
*(通用元素选择器) 匹配任何元素
*{ margin: 0;padding: 0;} -
元素选择器
-
选中相同的元素，对相同的元素设置同一种
css样式 -
div{width: 200px;height: 200px;background: red;} -
选中页面中所有的的
div元素
-
-
class选择器-
给标签设置一个
class属性，在写样式时，在class名字前面加个. -
.box{width: 200px; height: 200px;background: red;} -
一般给具有相同属性的元素设置同一个
class
-
-
id选择器-
给标签设置一个
id属性，在写样式时，在id名字前面加个# -
#box{width: 200px; height: 200px;background: red;} -
id具有唯一性，在一个页面中，同一个id只能出现一次
-
-
群组选择器
-
对几个有相同属性的选择器进行操作时，一个一个分开写，显得代码冗余
-
p,div{width: 200px; height: 200px;background: red;}
.box,.wrap{width: 200px; height: 200px;background: red;} -
两个选择器之间必须用 ，隔开
-
-
相邻选择器
-
相邻选择器操作的对象是该元素的同级元素
-
div + p{ background: green; } -
选择
div相邻的下一个兄弟元素p
-
-
兄弟选择器
-
兄弟选择器操作的对象是该元素下的所有同级元素
-
div ~ p{background: green;} -
选择
div相邻的所有兄弟元素p
-
-
子代选择器
-
选择某个元素下面的子元素
-
div > p{background: green;}
-
-
后代选择器
-
选择某个元素下面的子元素
-
div p{background: green;}
-
-
伪类选择器
-
:link匹配所有未被点击的链接 -
:visited匹配所有已被点击的链接 -
:hover匹配鼠标悬停其上的元素 -
:active匹配鼠标已经在其上按下但是还没有释放的元素
-
-
hover拓展-
.box:hover{} 改变元素本身 -
.box:hover p{} 改变元素下面的p子元素
-
-
cursor鼠标移入时以何种状态显示-
defult通常是一个箭头 -
wait光标指示正忙 -
help光标指示帮助 -
pointer小手
-
选择器优先级
-
基本选择器优先级排序（从低到高）
-
*{} -
tagName{} -
.class{} -
#id{}
-
特殊情况
-
级别相同的选择器：后面的样式会覆盖前面的（后来居上）
.wrap{background:red}.wrap{background:green} -
复杂后代选择器
-
比高低顺序依次是：
id选择器class选择器tanName{} -
id选择器个数不相等，id个数越多的优先级越高，后面不用比 -
id选择器个数相等，则看class个数，多的优先级高，后面不用比 -
class个数相等，再看tagName个数 -
#wrap ul li .list{}和.wrap ul li #list{}优先级一样
-
选择器使用原则：准确的选中元素，并且不影响其他元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #box li{ list-style: none;/*去掉小黑圆点*/ width: 100px; height: 100px; background: gray; } div div ul li.box2{ background: red; } div.box{ /*选中的这个div他有class名字叫做box*/ width: 200px; height: 200px; background: red; } div .box{/*div的后代 class叫做box的元素*/ width: 100px; height: 100px; background: blue; } </style> </head> <body> <!-- 复杂后代选择器 1.先比id(最高位) class（中间位） tagName（个数位） 1 2 3 2.id选择器个数不相等，id越多，优先级越高 3.id选择器个数相同,则看class,class多的优先级高 4.class个数相等，就看tagName个数 --> <!--<div id="box">--> <!--<div class="box">--> <!--<ul class="box1">--> <!--<li>1</li>--> <!--<li class="box2">2</li>--> <!--<li class="box2">3</li>--> <!--<li id="box1" class="box2">4</li>--> <!--</ul>--> <!--</div>--> <!--</div>--> <div class="box">1 <div class="box">2</div> <p class="box"></p> </div> </body> </html>
-
font-family字体类型-
我们在定义的时候要注意，要是用户电脑上没有这个字体的时候怎么办
-
.box{font-family:Tahoma,'Microsoft Yahei',SimSun;}/*字体类型*/ -
字体中有多个字体的时候，如果前面的字体没有就使用后面的字体
-
-
font-size字体大小-
单位：
px|%|em|rem -
%相对于父容器中字体%调整 -
1em等于父级的字体尺寸——相对于父级字体大小而言 -
rem相对于html（跟标签）的字体大小
-
-
font-weight字体粗细-
关键字
-
normal默认字体 -
lighter较细 -
blod较粗 -
bolder很粗
-
-
给值
-
100-900只能给整百数，值越大字体越粗 -
400相当于正常的 -
700相当于blod
-
-
-
font-style字体类型（规定是否倾斜）-
normal文字正常 -
italic文字斜体 -
oblique文字倾斜
-
-
color文字颜色-
关键词
-
green、black等英文单词
-
-
#16进制值-
#666666、#ddd
-
-
rgb(0-255,0-255,0-255)-
r-red
-
g-green
-
b-blue
-
-
rgba(0-255,0-255,0-255,0-1)-
r-red
-
g-green
-
b-blue
-
a-alpha透明度
-
0 完全透明
-
1 完全不透明
-
-
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*font-family 字体类型浏览器默认的字体是微软雅黑，字体中有多个字体的时候，如果前面的字体没有就使用后面的字体*/ /* font-size 字体大小 单位 px rem % em px 谷歌浏览器默认字体大小16px,最小是12px rem 相对于html(根标签)的字体大小 em 等于父级的字体尺寸——相对于父级字体大小而言的 % 相对于父容器中字体的%调整 */ /* font-weight 字体粗细 关键字 normal 默认字体 lighter 较细 bold 加粗 bolder 很粗 给值 只能100-900的整百数 400相当于正常的 700相当于bold */ /* font-style 字体类型 normal 默认 文字正常 italic 文字斜体（属性） oblique 文字斜体 */ /* color 文字颜色 关键字 英文单词 red green 16进制（0-9 a-f） #5544aa #54a #abd456 #dddddd #ddd rgb(0-255,0-255,0-255) r red g green b blue rgba(0-255,0-255,0-255,0-1) r red g green b blue a alpha(透明度) 0 完全透明 1 完全不透明 */ .box2{ font-family: "Microsoft New Tai Lue"; font-size: 20px; font-style: oblique; color: rgba(134, 42, 123, 0.5); } .box1{ font-size: 13px; font-weight: bold; color: #ddd; } .box4{ /*font-size: 12px;*/ /*font-size: 2em;*/ /*font-size: 50%;*/ font-size: 2rem; } .box3{ font-family: italic,"Malgun Gothic"; /*font-size: 5px;*/ font-size: 2rem; font-weight: 700; } </style> </head> <body> <div class="box1">Hello word 你好 123 <div class="box4">Hello word 你好 123</div> </div> <div class="box2">Hello word 你好 123</div> <div class="box3">Hello word 你好 123</div> </body> </html>
css文本属性
-
text-decoration下划线、删除线、上划线-
none默认值,可以用这个属性值去掉已经有下划线或删除线或上划线的样式 -
underline下划线，一般用于文章的重点表明 -
overline上划线 -
line-through删除线
-
-
text-transform文本大小写-
none默认值 无转换发生 -
uppercase转换成大写 -
lowercase转换成小写 -
capitalize将英文单词的首字母大写
-
-
text-align文本水平对齐方式-
left默认值，向左对齐 -
right向右对齐 -
center居中对齐
-
-
text-indent首行缩进（em） -
line-height行高 -
letter-spacing字距 -
word-spacing词距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /* white-space: 换行方式 normal 正常换行 nowrap 不换行 */ /* text-align 文本水平对齐方式 left 默认值 向左对其 right center ***** 只针对文本和img标签，对其他标签无效 */ /* text-decoration 下划线 删除线 上划线 ***** none 默认值，可以用这个属性去掉已经有下划线或者删除线或者上划线的样式 underline 下划线，一般用于文章的重点表明 overline 上划线 line-through 删除线 */ /* text-transform 文本大小写 none 默认值 无转换发生 uppercase 转换成大写 lowercase 转换成小写 capitalize 将英文单词的首字母大写 */ /* text-indent 首行缩进（em） line-height 行高 ***** letter-spacing 字距 word-spacing 词距*/ *{ margin: 0; padding: 0; } p{ width: 300px; border: 1px solid red; /*white-space: nowrap; overflow: hidden; text-overflow: ellipsis;*/ /*text-decoration: underline;*/ /*text-decoration: overline;*/ /*text-transform: lowercase;*/ /*text-transform: uppercase;*/ text-transform: capitalize; line-height: 40px; text-indent: 2em; /*letter-spacing: 1em;*/ word-spacing: 1em; } .box{ text-align: center; } a{ text-decoration: none; } span{ text-decoration: line-through; } </style> </head> <body> <p> 日本的 英文 国名Japan japan，还有一层意思“漆”。这很容易让人想起China和瓷器的对应。某种程度上，两个东亚国家都是携带着工艺的骄傲走入世界近代史序列中的。“漆”在日本的传统文化中的地位自然不容小觑。 摊... </p> <p class="box">啦啦啦啦</p> <a href="http://www.baidu">去百度</a> <p>不要<span>998</span>只要98</p> </body> </html>
背景
-
background-color背景色 -
background-image：url（1.jpg)背景图片 -
background-repeat背景平铺-
repeat平铺，默认 -
no-repeat不平铺 -
repeat-xX轴平铺 -
repeat-yy轴平铺 -
注意：只有背景图片的宽高小于被设置的背景的元素的宽高，才会有平铺效果
-
-
background-position背景位置 X轴 Y轴-
关键词：(九宫格)
-
X轴left(默认) ,center,right
-
Y轴top(默认),center,bottom
-
-
值：% px
-
如果给一个值：第二个值默认center（50%）;
-
值：X轴的值 Y轴的值如果给的是方位值：可以颠倒
-
-
background-size背景大小-
值：% px
-
给一个值的时候，默认X轴，Y轴默认auto;
-
auto 会等比例缩放
-
特殊值
-
cover等比例缩放直到铺满X轴和Y轴/保持宽高比不变，保证占满盒子，但是不一定能看到全部图 -
contain等比例缩放X轴或Y轴其中一个方向/保持宽高比不变，保证看清全图，但是不一定占满盒子
-
-
-
background复合样式background:color image repeat position/size;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 300px; height: 400px; border: 1px solid red; /*background-color: yellow;*/ /*background-image: url("img/th.jpg");*/ /*background-repeat: no-repeat;*/ /*background-repeat: repeat-y;*/ /*background-size: 50% 50%;*/ /*background-size: cover;*/ /*background-size: contain;*/ /*background-position: center;*/ /*background-position: 50%;*/ background: yellow url("img/th.jpg ") no-repeat 50%/50%; /*background: color image repeat position/size*/ } /* background-color 背景色 background-image 背景图片 background-repeat 背景平铺 repeat 平铺 默认 repeat-x 平铺x repeat-y 平铺y np-repeat 不平铺 注意：只有背景图片的宽高小于被设置的元素的宽高，才会有平铺效果 background-position 背景位置 x轴 y轴 x轴 left center right y轴 top center bottom 如果只给一个值，默认在x轴，y轴默认center(50%) % px background-size 背景大小 % px 给一个值的时候，默认x轴，y轴默认auto auto会等比缩放 cover 等比例缩放直到铺满x,y轴 可以铺满整个框 但是不一定能看到完整的图片 contain 等比例缩放x轴或者y轴其中的一个方向 不一定铺满 但是可以看到整个图片 */ </style> </head> <body> <div> <!--<img src="img/th.jpg" alt="">--> </div> </body> </html>
vertical-align垂直对齐方式
定义行内元素的基线相对于该元素所在行的基线的垂直对齐。 top 元素的顶端与行中最高元素的顶端对齐 对齐到line-height的顶部 middle 此元素放置在父元素的中部 对齐到line-height 中部 bottom 元素的顶端与行中最低的元素的顶端对齐 对齐到line-height 底部 （与line-height相关） text-top 元素的顶端与父元素字体的顶端对齐 text-bottom 元素的底端与父元素字体的底端对齐。 baseline 默认。元素放置在父元素的基线上。 加vertical-align的同排元素都要vertical-align；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .box{ width: 300px; border: 1px solid red; margin-top: 50px; font-size: 50px; line-height: 200px; } p{ width: 100px; height: 100px; background: yellow; display: inline-block; /*vertical-align: top;*/ /*vertical-align: bottom;*/ vertical-align: middle; } </style> </head> <body> <div class="box"> <p></p>xghf </div> <!-- vertical-align 垂直对齐方式 定义行内元素的基线相对于该元素所在行的基线的垂直对齐。inline inline-block baseline 默认 top 元素的顶端与行中最高元素的顶端对齐 / 对齐到line-height的顶部 middle 此元素放置在父元素的中部。(小写x的中部) /对齐到line-height 中部（其实小写x中部） bottom 元素的顶端与行中最低的元素的顶端对齐。/对齐到line-height 底部 （与line-height相关） 加vertical-align的同排元素都要vertical-align --> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .box{ width: 300px; border: 1px solid red; margin-top: 50px; } p{ width: 100px; height: 100px; display: inline-block; background: aqua; } p.p1{ line-height: 40px; vertical-align: text-top; } p.p2{ line-height: 80px; vertical-align: text-top; } </style> </head> <body> <div class="box"> <p class="p1">p1</p> <p class="p2">p2</p>xgf </div> <!--text-top 对齐到文字顶部 text-bottom 对齐到文字底部 加vertical-align的同排元素都要vertical-align--> </body> </html>
css盒子模型
-
所有的页面元素都可以看成一个盒子，并且占据着一定的页面空间
-
盒子模型是由
content(内容)、padding(内边距)、margin(外边距)、border(边框)这四个属性组成的。
border边框
-
复合样式：border:边框大小 类型 颜色;
border:5px solid #006633; -
border-width: 5px; 大小
border-style: solid; 类型
border-color: red; 颜色
border-top:0px; /*去除上边框*/
border-top:none; /*去除上边框*/ -
border-width边框大小-
四个值：上 右 下 左(顺时针)
-
三个值：上 左右 下
-
二个值：上下 左右
-
一个值：四个方向值相等
-
border-top-width顶部边框大小 -
border-right-width右边框大小 -
border-bottom-width底部边框大小 -
border-left-width左边框大小
-
-
border-style边框类型-
solid实线 -
dashed虚线 -
dotted点线 -
double双边框 -
border-top-style顶部边框类型 -
border-right-style右边框类型 -
border-bottom-style底部边框类型 -
border-left-style左边框类型
-
-
border-color边框颜色-
四个值：上 右 下 左(顺时针)
-
三个值：上 左右 下
-
二个值：上下 左右
-
一个值：四个方向颜色一样
-
border-top-color顶部边框颜色 -
border-right-color右边框颜色 -
border-bottom-color底部边框颜色 -
border-left-color左边框颜色
-
-
padding内边距，边框与内容之间的距离-
四个值：上 右 下 左(顺时针)
-
三个值：上 左右 下
-
二个值：上下 左右
-
一个值：四个方向值相等
-
padding-top顶部内边距 -
padding-right右内边距 -
padding-bottom底部内边距 -
padding-left左内边距
-
-
margin外边距，元素与其他元素的距离（边框以外的距离）-
margin-top顶部外边距 -
margin-right右外边距 -
margin-bottom底部外边距 -
margin-left左外边距 -
自动水平居中
-
margin:auto;左右居中 -
margin:20px auto;上下20px左右居中 -
margin:20px auto 0;上20px左右居中 下0
-
-
盒子大小的计算
-
content+border+padding盒子大小 = 样式宽 + 内边距 + 边框 -
盒子宽度 = 左border+左padding+width+右padding +右border
-
盒子高度 = 上border+上padding+height+下padding+下border
float浮动
-
浮动的定义：使元素脱离文档流 ，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
-
文档流 是文档中可显示对象在排列时所占用的位置/空间（在页面中占位置）
-
脱离文档流 ：在页面内中不占位置
-
浮动的一般情况
-
float:left; -
float:right;
-
-
清除浮动
-
overflow: hidden; -
.clearfix:after{content:'';display:block;clear:both;} 时下主流
-
position定位
-
规定元素的定位类型
-
static静态定位（没有定位），默认 -
relative相对定位，相对于其正常位置进行定位-
不会脱离文档流
-
不影响元素本身的特性
-
如果没有定位偏移量，对元素本身没有任何影响
-
-
absolute绝对定位，参考最近非static定位的父级进行定位-
使元素完全脱离文档流
-
没有定位父级则相对于body(整个文档)发生偏移
-
绝对定位一般配合相对定位使用
-
-
fixed固定定位，相对于浏览器窗口进行定位 -
方位词
-
left: 距离左边的距离
-
right: 距离右边的距离
-
top:距离顶部的距离
-
bottom:距离底部的距离
-
z-index 规定定位的层级（默认0）
-
值：number 值越大层级越高
-
-
