css语言 _生活百科

css：样式表、级联样式表、层叠样式表
css写在style标签里面，放在head标签中；大括号中写键值对语法
color：文字颜色
Font-family：字体
Font-size：字号
text-indent：首行缩进单位是em代表一个文字的间距
text-align 文本对齐方式，默认left ，还可以设置center居中，right居右。
实体化三属性：
宽度：width
高度：height
背景色：background
标签选择器：
【css语言】直接在css语法中写标签的名字就可以选中对应的标签
div代表大盒子（容器存放内容的）
span代表小盒子（容器存放内容的）
id选择器:
#名字{}
特点：不能重复使用也不能一个人设置多个id（相当于人的身份证一定是唯一的）

文章插图
类选择器：
.名字{}
特点：可以重复使用，一个人可以有多个类名（好像是人的称号一样）

文章插图
注意：今后class类选择器使用频率高于id选择器
goole案例：

文章插图

文章插图
CSS引入方式：
1、行内式
这种形式一定不要用，它会让代码量变得非常庞大，不方便修改！
书写在开始标签身上的style属性
例如：
<div style="color:#333;background:pink;height:50px;">我是行内式CSS</div>
注意：行内式没有实现结构与样式分离
2、内嵌式
注意：内嵌式是结构与样式半分离
优点：方便课上案例的书写（电商网站的首页必须使用这种方式，因为电商首页要求加载速度必须快，内嵌式比外链式快一些)
缺点：html和css代码没有实现分离，不方便修改
3、外链式
通过link放在head标签中，把外部的css文件引入到html文件中
<link rel="stylesheet" type="text/css" href="https://www.huyubaike.com/biancheng/my_css.css">
优点：实现了代码分离，方便修改和管理
缺点：运行速度比内嵌稍慢
总结：id选择器>类选择器>标签选择器
复合选择器：
后代选择器
规律：一个空格表示后代关系

文章插图
并集、并列选择器：
div，span，h1，.span1,#span2{}
用逗号连接选择器，代表这些元素同时被选中
标签指定式、指定标签式：
div.类名
注意：标签和类名之间没有空格
高级权重对比：
1、引入方式对比：
外链和内嵌权重相同，先写得会被后写的覆盖
内嵌权重最大，如果想覆盖它，就只能给样式中添加，important来把权重提高

文章插图
2、复合选择器权重：
id我们认为是100斤 class类名认为10斤标签认为1斤
综合起来大的权重就高，如果权重一样，先写得被后写的覆盖
CSS文字控制常用属性：
文字粗细：font-weight（正常的：normal 加粗：bold）
文字倾斜：font-style（正常的：normal 倾斜：italic）
文字修饰属性:text-decoration（下划线：underline 顶划线：overline 贯穿线/删除线：line-through 无：none）
强制字母换行：word-break：break-all
首行缩进：text-indent：2em
伪类写法：:hover 代表鼠标悬停状态的样式
行高属性：
line-height
一行文字的结束到上一行文字结束的间距。
边框属性：
border：1px solid red
粗细实线颜色
虚线：dashed
某个方向：border-left（right、top、bottom）
注意：边框属性只有实线和虚线是没有兼容性问题的，其它方式的线都会有不同程度的兼容问题，如果程序员使用了，一定要报错！
盒子模型：
盒子模型的组成=宽高+边框+内边距（内容和边框的距离）+外边距（盒子和盒子之间的距离）
html5新标签：
header 头部
nav 导航
aside 侧导航
article 文章块
footer 底部
注意：这些html5新标签只能使用在手机网站的书写中，可以提升搜索引擎对网站的优化，不能用在pc（电脑）端网站，因为ie低版本不识别这些新标签。