CSS笔记
1、选择器
- 标签选择器；
- id选择器；
- 类选择器；
- 通配符选择器；
2、基础属性
<style>
p {
color: brown;
/* 定义字体大小 */
/* font-size: 20px; */
/* 字体设置，用,分割 */
/* font-family: "宋体"; */
/* 设置字体粗细
normal 默认值（不加粗的）；
bold 定义粗体（加粗）；；
100~900 400等同于normal,700等同于bold,注意：这些数字后面不要跟单位
*/
/* font-weight: normal; */
/* 字体样式
italic ：斜体；
normal : 正常；
*/
/* font-style: normal; */
/* 复合属性（简写方式）（注意不能颠倒顺序）
font-size font-family;不能省略，其他的可以不写；
如下： */
/* font: font-style font-weight font-size font-family; */
font: italic 700 20px "宋体";
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 我们通常用的单位是px像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按团队约定来写字体 |
| font-weight | 字体粗细 | 加粗是700或者bold ；不加粗是normal或者400；数字后面不用跟单位 |
| font-style | 字体样式 | 倾斜是italic ；不倾斜是normal ；工作中我们最常用的是normal |
| font | 字体连写 | 字体连写是有顺序的，不能随意颠倒位置；其中字号和字体必须同时出现； |
3、文本属性
- 颜色：
| 表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue，还有我们的御用色 pink |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
<style>
p {
/*预定义的颜色值 */
/* color: brown; */
/*十六进制 */
/* color: #ff0000; */
/*rgb */
color: rgb(57, 173, 169);
}
</style>
</head>
<body>
<p>文本属性</p>
</body>
- 文本对齐text-align
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认） |
| right | 右对齐 |
| center | 居中对齐 |
<style>
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>居中对齐的文本</h2>
</body>
- 文本装饰text-decoration
| 属性值 | 解释 |
|---|---|
| underline | 下划线；链接 a 自带下划线（常用） |
| overline | 上划线；（几乎不用） |
| line-through | 删除线；（不常用） |
| none | 默认；没有装饰线（最常用） |
<style>
p {
/* 下划线 */
/* text-decoration: underline; */
/* 上划线 */
/* text-decoration: overline; */
/* 删除线 */
text-decoration: line-through;
}
a {
/* 链接去除下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<p>文本装饰</p>
<a href="#">超链接</a>
</body>
- 文本缩进text-indent
- text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进；
<style>
p {
text-indent: 2em;
}
</style>
em 是一个相对单位，就是当前元素( font-size)1 个文字的大小,如果当前元素没有设置大小，则会按照父元素的1个文字大小。
- 行间距line-height
- line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离；
<style>
p {
line-height: 30px;
}
</style>
4、CSS引入方式
4.1、内部样式表
- style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的标签中；
- 通过此种方式，可以方便控制当前整个页面中的元素样式设置；
- 代码结构清晰，但是并没有实现结构与样式完全分离；
- 使用内部样式表设定CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式；
4.2、行内样式表
- style其实就是标签的属性；
- 在双引号中间，写法要符合CSS规范；
- 可以控制当前的标签设置样式；
- 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑用；
- 使用行内样式表设定CSS，通常也被称为行内式引入；
4.3、外部样式表
实际开发都是外部样式表.适合于样式比较多的情况核心是:样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用；
- 新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中在HTML页面中；
- 使用标签引入这个文件
5、Emmet语法
- Emmet生成HTML标签语法；
- 生成标签直接输入标签名按tab键即可 比如 div 然后tab键，就可以生成 ；
- 如果想要生成多个相同标签 加上就可以了比如 div * 3就可以快速生成3个div；
- 如果有父子级关系的标签，可以用>比如 u>i就可以了；
- 如果有兄弟关系的标签，用+ 就可以了比如 div+p；
- 如果生成带有类名或者id名字的，直接写 demo 或者 #twotab 键就可以了；
- 如果生成的div类名是有顺序的，可以用自增符号 $；
- 如果想要在生成的标签内部写内容可以用{ }表示
- Emmet生成CSS样式语法；
CSS基本采取简写形式即可：
- 比如 w200按tab 可以生成 width:200px；
- 比如lh26 按tab 可以生成 line-height:26px;
- 格式化带代码的方式：
- 快捷键—>shift+alt+f
- 文件—>首选项—>设置 ;搜索emmet.include;在settingsjson下的[用户]中添加以下语句：“editor.formatOnType”:true, “editor.formatOnSave”:true;
- 新版本直接搜索format，然后把保存改变格式勾上就行了；
6、CSS的复合选择器
6.1、后代选择器；
-
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
-
语法：
元素1 元素2 {样式声明}
表示元素1里面的所有元素2（后代元素）
-
元素1和元素2中间用空格隔开；
-
元素1是父级，元素2是子级，最终选择的是元素2；
-
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可；
-
元素1和元素2可以是任意基础选择器；
6.2、子选择器；
-
**子元素选择器( 子选择器)**只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
-
语法：
元素1>元素2 {样式声明}
选择元素1里面的所有直接后代（子元素）元素2
- 元素1和元素2中间用大于号隔开；
- 元素1 是父级，元素2是子级，最终选择的是元素2；
- 元素2 必须是亲儿子，其孙子、重孙之类都不归他管.你也可以叫他 亲儿子选择器
6.3、并集选择器；
-
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明；并集选择器是各选择器通过英文逗号(，) 连接而成任何形式的选择器都可以作为并集选择器的一部分。
-
语法：
元素1，元素2 {样式表}
表示选择元素1和元素2
- 元素1和元素2中间用逗号隔开；
- 逗号可以理解为和的意思；
- 并集选择器通常用于集体声明；
<style>
div,
p,
.nav li {
color: brown;
}
</style>
</head>
<body>
<p>熊大</p>
<div>熊二</div>
<ul class="nav">
<li>佩奇</li>
<li>猪爸爸</li>
<li>乔治</li>
</ul>
</body>
6.4、伪类选择器；
1、链接伪类选择器；
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素.
伪类选择器书写最大的特点是用冒号(😃 表示，比如:hover 、 :first-child。
<style>
/*1、 a:link 未访问的链接，把没有点击过（访问过）的链接选出来 */
a:link {
color: rgb(89, 98, 95);
text-decoration: none;
}
/*2、 a:visited 选择（访问过） 点击过的链接 */
a:visited {
color: rgb(132, 22, 235);
}
/*3、 a:hover 鼠标经过的那个链接，产生颜色变化 */
a:hover {
color: coral;
}
/*4、 a:active 我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: darkgreen;
}
</style>
</head>
<body>
<a href="#">未知网站</a>
</body>
- 注意事项：
- 为了确保生效，请按照LVHA的循顺序声明:link - :visited - :hover - :active；
- 记忆法:love hate或者Iv 包包hao；
- 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式；
2、focus伪类选择器；
- :focus伪类选择器用于选取获得焦点的表单元素；
- 焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
<style>
input:focus {
background-color: aquamarine;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
7、元素显示模式
7.1、块级元素
-
块级元素的特点；
- 比较霸道，自己独占一行；
- 高度，宽度、外边距以及内边距都可以控制；
- 宽度默认是容器(父级宽度)的100%；
- 是一个容器及盒子，里面可以放行内或者块级元素；
-
注意点：
-
文字类的元素内不能使用块级元素;
-
p>标签主要用于存放文字，因
里面不能放块级元素，特别是不能放
; -
同理，
~
等都是文字类块级标签，里面也不能放其他块级元素；
-
7.2、行内元素
-
常见的行会元素：常见的行内元素有、、、、、
、、、等,其中标签是最典型的行内元素。有的地方也将行内元素称为内联元素；、 -
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个；
- 高、宽直接设置是无效的；
- 默认宽度就是它本身内容的宽度；
- 行内元素只能容纳文本或其他行内元素；
-
注意点：
- 链接里面不能再放链接；
- 特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全；
7.3、行内块元素
- 在行内元素中有几个特殊的标签————、、，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素；
- 行内块元素的特点：
- 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)；
- 默认宽度就是它本身内容的宽度(行内元素特点)；
- 高度，行高、外边距以及内边距都可以控制(块级元素特点)。
7.4、显示模式的转换
- 行内元素转为块级元素： display:block；
- 块级元素转换为行内元素：display:inline;
- 其他的转换为行内块元素： display:inline-block;
8、背景
8.1、背景分类
- 背景颜色===>background-color: brown;
- 背景图片===>background-image: url(…/纯html/1.jpg);
8.2、背景平铺
- background-repeat:
| 参数值 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向上平铺 |
8.3、背景位置
1、方位名词
- 利用background-position属性可以改变图片在背景中的位置；
background-position ：x y
参数：x坐标和y坐标。可以使用方位名词或者精确单位；
| 参数值 | 说明 |
|---|---|
| length | 百分数|由浮点数字和单位标识组成的长度值 |
| position | top|center|bottom|left|center|right 方位名词 |
-
参数是方位名词
-
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top left 效果一致；
-
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐；
background-position: center top;
2、精确单位
- 参数是精确单位
- 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标；
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中;
<style>
div {
width: 300px;
height: 300px;
background-color: rgb(134, 165, 155);
background-image: url(../bj.png);
background-repeat: no-repeat;
/*
精确单位：第一个值一定是x轴，第二值是y轴
*/
/* background-position: 20px 50px; */
/* 如果只指定一个值，第一个值肯定是x轴坐标，另一个默认垂直居中 */
background-position: 20px;
}
</style>
</head>
<body>
<div></div>
3、混合单位；
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标；
<style>
div {
width: 300px;
height: 300px;
background-color: brown;
background-image: url(../bj.png);
background-repeat: no-repeat;
background-position: 20px center;
}
</style>
</head>
<body>
<div></div>
</body>
4、背景固定
- background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动；
background-attachment ：scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像随内容滚动 |
| fixed | 背景图像固定 |
<style>
body {
background-image: url(../che.png);
background-repeat: no-repeat;
background-position: center top;
color: aliceblue;
font-size: 20px;
text-indent: 6em;
/* 固定背景 */
background-attachment: fixed;
}
</style>
</head>
<body>
<h2>背景固定，天王盖地虎；</h2>
<h2>背景固定，天王盖地虎；</h2>
<h2>背景固定，天王盖地虎；</h2>
5、复合性的写法
- 约定的顺序；
background: 背景颜色、背景图片地址、背景平铺、 背景图像滚动、背景图片位置
<style>
body {
color: #fff;
background: black url(../che.png) no-repeat fixed center top;
}
</style>
</head>
<body>
<p>天王盖地虎，宝塔镇河妖！</p>
6、背景色半透明
background: rgba(0 ,0 ,0 , 0.2)
- 最后一个参数是alpha透明度，取值范围在0~1之间；
- 我们习惯把0.3的0省略掉，写为background : rgba (0 ,0 , 0 , .3)；
- 注意：背景半透明是值盒子背景半透明，盒子里面的内容不受影响；
- CSS3新增属性，IE9+版本浏览器支持；
9、CSS三大特性
9.1、层叠性；
- 样式不冲突，遵循的原则是就近原则，哪个样式离结构近，就执行那个样式；
- 样式不冲突，不会层叠；
9.2、继承性；
- 恰好地使用继承可以简化代码，降低CSS样式的复杂性；
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）；
- 行高的继承；
- 行高可以跟单位也可以不跟单位；
- 如果子元素没有设置行高，则会继承父元素的行高为1.5；
- 此时子元素的行高是:当前子元素的文字大小*1.5；
- body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高;
9.3、优先级；
- 选择器相同，则执行层叠性；
- 选择器不同，则根据选择器权重执行；
| 选择器 | 选择器权重 |
|---|---|
| 继承 或者 * | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style=" " | 1，0，0，0 |
| ！importand重要的 | ∞无穷大 |
- 注意事项：
- 权重是有4组数字组成,但是不会有进位；
- 可以理解为类选择器永远大于元素选择器id选择器永远大于类选择器,以此类推；
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值；
- 可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10id选择器 100,行内样式表为1000,!important无穷大；
- 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
-
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重；
10、盒子模型
10.1、边框（border）；
- border可以设置元素的边框。边框有三部分组成：边框的宽度（粗细）、边框的样式、边框的颜色；
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
- 边框的样式：
- solid===>实线边框；
- dashed===>虚线边框；
- dotted===>点线边框
<style>
div {
width: 300px;
height: 200px;
/* border-width: 定义边框的粗细 px */
border-width: 5px;
/* border-style 边框的样式；solid实线边框；dashed虚线边框；dotted点线边框 */
border-style: solid;
/* border-color: 边框的颜色 */
border-color: brown;
}
</style>
</head>
<body>
<div></div>
</body>
- 边框的复合写法：
<style>
div {
width: 300px;
height: 200px;
/* 边框的简写方法，没有顺序 */
border: 5px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
-
表格的细线边框；
- border-collapse: collapse;
- 表示相邻的边框合并在一起；
-
边框会影响盒子的实际大小；
- 测量盒子大小时，不量边框；
- 如果测量的时候包含了边框，则需要width/height减去边框宽度；
10.2、盒子模型内边距padding
- padding属性用于设置内边距，即边框与内容之间的距离；
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-buttom | 下内边距 |
- 复合写法；
11、CSS3过渡
- transition：要过渡的属性、花费时间、运动曲线、何时开始；后面属性两个可以省略不写；
- 1.属性: 想要变化的 css 属性，宽度高度 背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。
- 2花费时间: 单位是秒(必须写单位) 比如0.5s
- 3.运动曲线: 默认是ease (可以省略)
- 4.何时开始 : 单位是秒(必须写单位)可以设置延迟触发时间 默认是0s (可以省略)
<style>
div {
width: 200px;
height: 100px;
background-color: skyblue;
/* transition: width 1s; */
/* 记住一定要写s */
/* 谁做过渡，给谁加transition属性 */
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
- 1.属性: 想要变化的 css 属性，宽度高度 背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。
- 2花费时间: 单位是秒(必须写单位) 比如0.5s
- 3.运动曲线: 默认是ease (可以省略)
- 4.何时开始 : 单位是秒(必须写单位)可以设置延迟触发时间 默认是0s (可以省略)
<style>
div {
width: 200px;
height: 100px;
background-color: skyblue;
/* transition: width 1s; */
/* 记住一定要写s */
/* 谁做过渡，给谁加transition属性 */
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
3045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
