CSS样式表
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} - 复杂后代选择器
- 比高低顺序依次是：
idclass选择器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>
css文字属性
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相对定位，相对于其正常位置进行定位
- 不会脱离文档流
- 不影响元素本身的特性
- 如果没有定位偏移量，对元素本身没有任何影响
absolutestatic定位的父级进行定位
- 使元素完全脱离文档流
- 没有定位父级则相对于body(整个文档)发生偏移
- 绝对定位一般配合相对定位使用
fixed固定定位，相对于浏览器窗口进行定位- 方位词
- left: 距离左边的距离
- right: 距离右边的距离
- top:距离顶部的距离
- bottom:距离底部的距离
- z-index 规定定位的层级（默认0）
- 值：number 值越大层级越高
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
