文章目录
一、CSS引入方式
- 内嵌式
s t y l e style style放在 h e a d head head中 - 外联式
类似分文件编写,需要使用 l i n k link link语法引用 . c s s .css .css文件
<link rel="stylesheet" href="xxx.css">
- 行内式
不推荐
二、选择器
1、标签选择器
<style>
p { //p为段标签
}
</style>
2、类选择器
<style>
.box { //定义的类名
}
</style>
<body>
<div class="box"></div>
</body>
3、id选择器
一般与js搭配使用
<style>
.one { //定义的id
}
</style>
<body>
<div id="one"></div>
</body>
4、通配符选择器
找到所有的标签
<style>
* {
}
</style>
<body>
<div></div>
<p></p>
</body>
三、字体操作
1、字体大小
<style>
.box {
font-size: 30px; //px是像素
}
</style>
2、字体粗细
常用:
- 普通 normal
- 加粗 bold
<style>
font-weight: bold;
</style>
3、字体样式(是否倾斜)
- 普通 normal
- 倾斜 italic
<style>
font-style: italic;
</style>
4、字体修改
常见字体系列
- sans-serif 无衬线字体
- serif 衬线字体
- monospace 等宽字体
修改字体系列语法
<style>
font-family: 宋体,隶书,sans-serif
</style>
- 渲染规则:
(1)从左往右按顺序查找,找到第一个电脑有的字体使用
(2)如果都不支持,则按最后的字体系列默认值使用 - 注意
如果字体名称中存在多个单词,推荐使用引号包裹。
四、文本操作
1、文本缩进
<style>
.box {
text-indent: 5px; //缩进5像素
text-indent: 2em; //缩进两字符
}
</style>
em指font-size大小
2、文本水平对齐方式
<style>
.box {
text-align: center;
}
</style>
- 注意:
若需要给文本水平居中,text-align需要给文本的父元素设置。
3、文本修饰
<style>
.box {
text-decoration: underline;
}
</style>
- underline 下划线
- line-through 删除线
- overline 上划线
- none 无装饰线
注意:
开发中会使用text-decoration: none;清除a标签默认的下划线
4、文本水平居中总结text-align: center;
- 能让哪些元素水平居中:
(1)文本
(2)span标签、a标签
(3)input标签、img标签 - 注意:
如果需要让以上元素水平居中,需要给以上元素的父元素设置
5、文本水平居中方法margin
- 是将div、p、h(大盒子)水平居中的方法
margin: 0 auto;
- 注意:
(1)想让谁水平居中,就给谁里面设置
(2)margin:0 auto一般针对于有固定宽度的盒子,大盒子没有设置固定宽度,此时会默认占满父元素的宽度。
五、行高
- 控制行间距
<style>
.box {
line-height: 5px;
line-height: 2; 2倍字符间距
}
</style>
- 注意
(1)使用line-height:文字父元素高度,可以使得单行文本垂直居中。
(2)line-height:1;可以消除上下间距
font连写
<style>
.box{
font:style weight size/line-height family;
}
</style>
六、颜色常见取值
- 关键词
- rbg表示法:
红绿蓝三原色,每一项取值范围0~255 - rbga表示法:
红绿蓝三原色+a表示透明度,取值范围0~1 - 十六进制表示法
七、选择器进阶
1、后代选择器
- 语法
选择器1 选择器2{CSS} - 结果:
在选择器1找到的标签的儿子、孙子……中,找到所有满足选择器2的标签
2、子代选择器
- 语法
选择器1>选择器2{CSS} - 结果
在选择器1所找到的标签的子代中,找到满足选择器2的标签
3、并集选择器
- 语法
选择器1,选择器2{CSS} - 结果
找到同时满足任意一个选择器的元素
4、交集选择器
- 语法
选择器1选择器2{CSS} - 结果
找到同时满足两个选择器的元素
八、简写语法(emmet语法)
九、hover伪类选择器
- 选中鼠标悬停在元素上的状态,设置样式
- 语法
选择器 : hover{CSS}
十、背景相关
- background-color 背景颜色
- background-image 背景图片
- background-repeat 背景平铺
(1)repeat x,y方向都平铺
(2)no-repeat 不平铺
(3)repeat-x 沿着水平方向平铺
(4)repeat-y 沿着垂直方向平铺 - background-position 背景位置
可使用方位名词或者数字+px
背景属性的连写
background: clor image repeat position
十一、元素显示模式
1、块级元素
- 属性:
display:block - 显示特点:
(1)独占一行
(2)宽度是父元素的宽度,高度由内容撑开
(3)可以设置宽高
2、行内块元素
- 属性:
display:inline-block - 显示特点:
(1)一行可显示多个
(2)可以设置宽高
3、元素显示模式转化
拓展、HTML嵌套规范
块级元素基本可以任意嵌套元素,但是:
特殊的,p标签中不可以嵌套块级元素