这是我参与「第四届青训营 」笔记创作活动的的第3天
css的作用
Cascading Style Sheets; 给HTML页面结构进行美化的样式层叠表可以给页面进行颜色 背景 动画 等等呢个效果
css的三种引入方式
- 使用
link标签进行外部文件(css为后缀)连接 - 使用
style内嵌样式 直接写在html文件里面 - 使用行内样式 在元素标签里面通过
style关键字书写样式<p style="color: red">我是红色的</p>
标签选择器 (Selector) element class id ....
其作用: 给某个特定的元素标签进行样式的设置
-
还有其它的很多选择器: 通配选择器 伪类选择器 属性选择器 等
-
标签选择器: 内嵌样式书写
<html>
<head>
<style>
/* 标签选择器 作用于所有的 对应 标签名的元素身上 不推荐 */
h1 {
/* 样式编写的地方 可以是一个属性 也可以多个属性 */
color: red; /* 颜色属性*/
font-size: 16px; /* 文件大小属性*/
}
/* 类选择器 只作用于有对应 class属性 的标签身上 推荐 */
.myclass {
/* 样式覆盖 同一样式后面的样式会覆盖前面的样式 */
/* 样式的覆盖有几种 后来的覆盖前面的 还有就是 对应选择器的权重(id > class > 标签选择器) */
color: pink;
font-size: 50px;
}
/* id选择器 只作用于有对应id属性的标签 有且是唯一的 不应该出现两个id 是一样的选择器 */
#myid {
color: deeppink;
font-size: 80px;
}
/* 属性选择器 input 选择且属性type是passwrod就会添加上下面的样式 type是text的没有该样式 */
input[type="password"] {
font-size: 50px;
border: 21px solid red;
}
</style>
</head>
<body>
<h1>我是标签选择</h1>
<h1 class="myclass">我是 class 类选择器</h1>
<h1 id="myid">我是 id 类选择器 有且是在页面是唯一的id</h1>
<input type="password" />
<input type="text" />
</body>
</html>
组合选择器
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 通过面组AB | span:hover |
| 后代组合 | A B | 选项B应在选择A的里面 | div span |
| 亲子组合 | A > B | 选项B应是在选择A第一层 | div > span |
| 兄弟选择器 | A ~ B | 选择A应和选项B在同一层 | div ~ div |
| 相邻选择 | A + B | 选项 B , 如果它紧跟在A后面 | h2 + p |
颜色
- 十六进制
#fff|#ffffff - 单词
red|pink rgb(0, 0, 0)rgba(0, 0, 0, 0.1)第四个参数是 透明度调整 0 到 1opacity(0.1)透明度 0到1
字体
font-family: "微软雅黑";字体设置font-size: 18px;文字大小调整color: red;字体颜色调整font-weight: 700;文字的粗细调整
