CSS基础
css基础
介绍：层叠样式表
作用：给页面中的HTML标签设置样式
写法：css写在style标签中，style标签一般写在head标签里面，title标签下面
属性
color:文字颜色
font-size:字体大小
background-color:背景颜色
width:宽度
height:高度
<style>
p{
color:red;
font-size:30px;
background-color:pink;
width:300px;
height:300px;
}
</style>css引入
内嵌式：CSS 写在style标签中 提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
外联式：CSS 写在一个单独的.css文件中 提示：需要通过link标签在网页中引入
行内式：CSS 写在标签的style属性中 提示：基础班不推荐使用，之后会配合js使用
基础选择器
1. 标签选择器:
结构：标签名 { css属性名：属性值； }
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
<style>
s{
color:pink;
}
</style>2.类选择器:
结构：.类名 { css属性名：属性值； }
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签
<style>
.one{
color:pink;
}
</style>3.id选择器:
结构：.类名 { css属性名：属性值； }
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签
<style>
.#two{
color:blue;
}
</style>4. 通配符选择器
结构：* { css属性名：属性值； }
作用：找到页面中所有的标签，设置样式
注意点：
1. 开发中使用极少，只会在极特殊情况下才会用到
2. 在基础班小页面中可能会用于去除标签默认的margin和padding（后续讲解）
<style>
*{
color:blue;
margin:0;
padding:0;
</style>字体和文本样式
1.字体样式
1. 字体大小：font-size
取值:数字+px
2. 字体粗细：font-weight
取值:关键字[正常;normal 加粗:bold]
纯数字:[正常:100~900的整数 ( 正常:400 加粗:700) ]
3. 字体样式：font-style
取值： 正常（默认值）：normal
倾斜：italic
4. 字体类型：font-family
常见取值：
具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
● 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……
● 字体系列：sans-serif、serif、monospace等……
5. 字体类型：font属性连写
取值： font : style weight size family;
2. 文本样式
1. 文本缩进：text-indent
<head>
<style>
p{
/*首行缩写*/
text-indent
}
</style>
</head>
<body>
<p class="p">
这是篇文章是小红
</p>
</body>2. 文本水平对齐方式：text-align
.取值:
left:左对齐
center:居中对齐
right:右对齐
3. 文本修饰：text-decoration
underline:下划线(常用)
line-through:删除线(不常用)
overline:上划线(基本不用)
none:无装饰线(常用)
3.line-height行高
选择器进阶
学习路径
.1 并集选择器：,
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ， 选择器2 { css }
结果： 找到 选择器1 和 选择器2 选中的标签，设置样式
注意点：
1. 并集选择器中的每组选择器之间通过 , 分隔
2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器
3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
