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就是当前元素的文字大小)
- 当值为负的时，表示往左缩进
