CSS
文章目录
前面介绍了 HTML基础,光用HTML标签做出的网页就只是简简单单的文字,而CSS的作用对这些文字做一修饰美化。
基本语法
选择器+{一条/N条声明}
引入方式
内部样式表
写在style标签中,嵌入到html内部,一般放到head
标签中
行内样式表
通过style属性,作用在每个标签上,但是只适用于写简单样式。
**缺点:**不能写太复杂的样式
外部样式
- 创建一个css文件
- 使用link标签引入css
引用方式,在<head>
标签中加入<link>
标签
<link rel="stylesheet" href="style.css">
选择器
选择器种类
- 基础选择器:由单个选择器构成
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
- 复合选择器:把多种基础选择器综合起来运用
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
基础选择器
标签选择器
能快速为同一类型的标签都选择出来
<style>
div{
color: red;
}
p{
color :green;
}
</style>
类选择器
可以差异化表示不同的标签
以.
开头后面紧跟类的名字(对应的是标签中的class
)
<style>
.blue{
color: blueviolet
}
</style>
<div class="blue">这是一个div标签</div>
id选择器
选择HTML中i标签的id属性匹配的标签
以#
开头后面紧跟id
<style>
#demo_p01{
color :darkorange;
}
</style>
<div id="demo_p01">这是一个div标签</div>
标签id的命名建议使用 页面文件名+自定义的标签名
通配符标签
使用*
的定义,选取所有的标签
*{
color:red;
}
多用于页面的默认设置
复合选择器
后代选择器
选择某个父元素中的某个子元素
元素1 元素2{声明}
- 两者元素之间用空格分隔
- 元素1是父元素,元素2是子元素
子选择器
类似于后代选择器,但是只能选择子标签
元素1>元素2 {声明}
- 元素之间用
>
分割 - 元素2只能是子元素,不能是孙子元素
并集选择器
用于选择多组标签
元素1,元素2 {声明}
- 元素之间用
,
隔开 - 表示同时选中元素1和元素2
- 任何基础选择器都能使用并集选择器
常见元素的属性
CSS元素属性可以通过参考文档查看
字体属性
设置字体
p{
font-family:'微软雅黑';
}
大小
p{
font-size: 30px;
}
粗细
p{
font-weight:bold;
font-weight:400;
}
- 可以用数字表示粗细(数字范围 100~900)
- bold==700表示粗体,normal ==400表示不变粗
文字样式
/*设置倾斜*/
font-style: italic;
/*取消倾斜*/
font-style: normal;
文本属性
文本颜色
color: red;
color:#ff0000;
color: (255,0,0);
color属性
- 预定义的颜色值(直接是单词)
- 十六进制表示
- RGB方式
使用十六进制表示颜色时,如果两两相同,就可以用一个来表示
比如 #ff00aa=>#f0a
文字对齐
控制文字(图片)水平方向的对齐
taxt-align: [值];
值:
- center:居中
- left:靠左
- right:靠右
文本装饰
text-decoration: [值];
取值:
- underline 下划线
- none 啥都没有,可以给标签去掉下划线
- overline上划线
- line-through 删除线
文字缩进
控制段落的首行缩进
text-indent:[值];
- 单位可以使用px或者em(1em就是当前元素的文字大小)
- 当值为负的时,表示往左缩进