九.css样式
1.什么是css？
css即层叠样式表的首字母简写
2.css三大特性
层叠性，即为同意元素设置多个一样的样式，如颜色，同级的会是最后出现的颜色
继承性：当子标签没设置样式时，会继承父级的样式
优先级：！importan>行内样式>id选择器>类选择器>标签选择器>通配符>继承
3.css的语法
css构成
选择器 {声明1;声明2}
{}中间用;隔开
选择器 {属性1：属性值;属性2：属性值;}
4.css文件的引入方式
1.内联样式
<p style="color:red;text-align:center">段落标签</p>
2.内部样式表
在head中写入style
<head>
<style>
p {
color:red;
text-align:center;
}
</style>
</head>
3.外部链接方式
在head中加入link标签
<link rel="stylesheet" type="text/css" href="css/1.css">
4.导入样式表
@import "css/1.css"
<head>
<style>
@import "css/1.css"
p {
color:red;
text-align:center;
}
</style>
</head>
注意：样式表的优先级
内联样式>内部样式>外部样式>浏览器缺省设置
4.基础选择器
1.id选择器
第一步：
<div id="box">
盒子1
</div>
第二步：head中的style
<head>
<style>
#box {
color:red;
text-align:center;
}
</style>
</head>
2.class选择器
第一步：
<div class="box">
盒子1
</div><div class="box">
盒子2
</div>
第二步：head中的style
<head>
<style>
.box {
color:red;
text-align:center;
}
</style>
</head>
3.元素选择器
第一步：
<div>
盒子1
</div>
<div>
盒子2
</div>
第二步：head中的style
<head>
<style>
div {
color:red;
text-align:center;
}
</style>
</head>
4.*选择器,通配符选择器，选择全部元素
第一步：
<div>
盒子1
</div>
<p>
盒子2
</p>
第二步：head中的style
<head>
<style>
* {
color:red;
text-align:center;
}
</style>
</head>
5.选择器扩展
1.后代选择器
样式：E F {声明；}
选择父级E中的所有F元素，包括子孙
第一步：
<div>
<p>
段落标签1
</p>
<div>
<p>
段落标签2
</p>
<div>
</div>
第二步：head中的style
<head>
<style>
div p {
color:red;
text-align:center;
}
</style>
</head>
2.子代选择器
样式：E>F {声明；}
选择父级E中的所有F子元素，不包括孙子
第一步：
<div>
<p>
段落标签1
</p>
<div>
<p>
段落标签2
</p>
<div>
</div>
第二步：head中的style
<head>
<style>
div p {
color:red;
text-align:center;
}
</style>
</head>
3.分组选择器
E,F,G,H {声明;}
<div>
<p>
段落标签1
</p>
</div>
<span>
段落标签2
</span>
第二步：head中的style
<head>
<style>
div，span {
color:red;
text-align:center;
}
</style>
<head>
4.交集选择器
<div>
<p class="p1">
段落标签1
</p>
</div>
<span>
段落标签2
</span>
第二步：head中的style
<head>
<style>
p.p1 {
color:red;
text-align:center;
}
</style>
<head>
5.兄弟选择器
同级元素 E~F {声明;}
第一步：
<div class="test">
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<p>这是一个文字段落</p>
</div>
第二步：
<head>
<style>
p ~ p {
color: #f00;
}
</style>
</head>
6.相邻选择器
同级元素 E-F {声明;}
第一步：
<div class="test">
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<p>这是一个文字段落</p>
</div>
第二步：
<head>
<style>
p - p {
color: #f00;
}
</style>
</head>
6.权重
内联样式(1000)+id选择器(100)+类选择器(10)+元素选择器(1)
7.伪类选择器
注意：
必须时如下顺序，active是按下时
选择器:link {声明;}
选择器:visited {声明;}
选择器:hover {声明;}
选择器:active {声明;}
css常用属性
1.背景属性
1.复合样式
选择器{background：颜色 图片 是否平铺 位置;}
选择器{background：red url("路径") no-repeat top left;}
2.backgound-color背景颜色
选择器{background-color:red;}
3.background-image背景图片
选择器{backgroud-image:url("路径");}
4.background-repeat控制图片平铺
选择器{backgroun-repeat:repeat;}
5.backround-position背景图片位置
百分比:选择器{backgound-position:20% 20%;}
关键字:选择器{backgound-position:top left;}使用时注意top或者bottom在前
长度：选择器{backgound-position:50px 50px;}
6.background-size背景大小
选择器{backgound-size:contain;}
选择器{backgound-size:cover;}
选择器{backgound-size:400px 600px;}
选择器{backgound-size:100%;}
2.文本属性
1.文本颜色
选择器{color:red;}
2.文本对齐,left,right,center,justfy(宽度相等，左右外边距对齐)
选择器{text-align:center;}
3.文本修饰，none,overline（上划线）,line-through（删除线）,ubderline（下划线）
选择器{text-decoration:underline;}
4.文本转换uppercase（全部大写）,lowercase（全部小写）,captitalize（首字母大写）
选择器{text-transforma:uppercase;}
5.文本缩进
选择器{text-indent:16px;}
选择器{text-indent:2em;}
6.单词间距
选择器{word-spacing:16px;}
7.字符间距
选择器{letter-spacing:16px;}
8.行间距,行间距=文字高度+上间距+下间距
选择器{line-height:26px;}
3.字体属性
文字属性复合样式
选择器{font:font-style font-weight font-size/line-height font-family;}
1.字体名称font-family
注意字体名字多个单词的时候用引号括起来，多个字体的时候用,号分隔开
选择器{font-family:"Times New Roman",Times,serify;}
2.字体倾斜样式:narmal（正常）,italic（倾斜）,oblique（文字倾斜，少用）
选择器{font-style:normal;}
3.文字大小
选择器{font-size:30px;}
4.文字粗细:bold（加粗）,bolder（更粗）,normal（正常）,lighter(细，透明)，700（粗，无单位），100（细）
选择器{font-weigth:bold;}
4.列表属性
ul复合样式
ul{list-style: square inside url("路径")}
1.列表样式属性:none（无样式），disc（实心圆），square(实心正方形)，circle(空心圆)，demical(阿拉伯数字)，lower-alpha,upper-alpha（大小写英文字母），lower-roamn,upper-roman大小写罗马数字
ul {list-style-type:none}
2.列表样式图片
ul{list-style-image:url("路径")
3.列表样式位置inside,outside
ul{list-style-position:inside;}
5.表格
<style>
table {
/* 设置表格的边框折叠成一个单一的边框*/
border-collapse:collapse;
width:400px;
}
tr,th,td {
border:1px solid red;
text-align:center;
}
</style>
6.颜色
1.颜色名如red
2.16进值 #000000~#FFFFFF
3.RGB
4.RGBA(alpha)
5.transparent透明
7.如何设置图片垂直居中？
1.基线baseline，文字有个基线用于放q,g,p这种字母，当图片下方有空白的时候怎么解决呢？
对图片垂直居中，用垂直对齐
img {vertical-align:middle;}
文字垂直居中，用行间距
p {line-height:20px}
8.ul列表元素和父盒子高度不一致的时候怎么居中？
将列表元素设置成行内块,然后设置成行高
li {
display:line-block;
}
浙公网安备 33010602011771号