CSS笔记
一、什么是CSS
CSS全称cascading style sheets,层叠样式表,即效果可以叠加
二、为什么学习CSS
1.虽然HTML的标签中的属性可以设置样式效果,可是细节处理不好。
2.HTML实现样式会有大量的重复代码,维护成本高。CSS能够做到网页和内容分离,对网页中元素的位置排版等效果进行像素级的精准控制。CSS用来美化网页,需要依赖HTML。
三、CSS的基本使用
1.行内样式
将样式定义在HTML标签上的style属性中;
用行内样式写的CSS耦合度较高。
< p style=“color:red; font-size:20px”>< /p>
2.内部样式(内嵌式)
定义在head标签中的style标签中
< head>
p {color=“red”; font-size=“20px”}
(p 指的是HTML中的段落,称为标签选择器)
< /head>
3.外部样式(链接式,常用,CSS自成为一个文件)
通过link标签将外部的CSS文件引入到HTML中。
< link rel=“stylesheet” type=“text/css” href=“路径”>
rel:当前文件与引入文件之间的关系
type:引入文件的类型,此处为CSS类型
href:(超链接a标签中的必须属性)引入文件的路径。
注意:1.CSS的优先级遵循就近原则。 2.CSS声明要以分号结尾,声明要用{}括起来;3.规范:一行写一个声明,如果属性值由多个单词组成,要给值加上双引号。4.CSS的注释:同java,/* 注释内容 */
四、基本选择器
1.通用选择器:选择所有标签
星号 {属性名:属性值}
2.元素选择器:选择指定标签
标签名 {属性名:属性值}
3.id选择器:通过id来精准选择唯一的属性
井号#id属性值 {属性名:属性值}
注意:不要忘记加#号,不同的id要保持唯一性,定义id的规则:不能以数字开头,可由字母、下划线、数字,中划线组成。
4.class选择器:选择指定class属性值的元素
.class属性值{属性名:属性值}
5.选择器的优先级问题(权重值):
id选择器 100>类选择器 10>元素选择器 1>通用选择器
五、组合选择器
1.后代选择器(以空格分开)
选择指定元素的所有后代的元素
.nba li{} 意思为指定class为.nba元素后的所有li元素
2.子代选择器(以大于号隔开)
选择指定元素的后代的第一代元素
.nba+li{} 意思为指定class为.nba元素后的第一代li元素
3.普通兄弟选择器(以~隔开)
选择指定元素后的指定的兄弟元素,只会向下找
4.相邻兄弟选择器(以+隔开)
选择与指定元素的相邻的下一个兄弟元素,只会向下找
六、CSS的常用属性
1.背景属性
background-color 设置元素的背景颜色
background-image:url(图片地址)设置元素的背景图片你,默认背景重复显示。设置背景是否重复:no-repeat 不重复 repeat-x 纵向重复 repeat 横向重复
background-size:设置图片的大小 ?xp
2.文本属性
color 字体颜色
text-align 对齐方式(默认left左对齐)
text-decoration 文本修饰 overline 上划线
underline下划线 line-through 中划线
当把三个结合起来时,可同时实现上中下划线。 none 去除文本修饰(常用于去除超链接下面的线段)
text-indent:2em 设置缩进效果(一个em为一个字的宽度)
text-align:水平对齐方式 ;左中右,justify两端对齐
3.字体属性
font-family :宋体设置字体
font-size:10px
font-style:字体风格 normal正常体 italic斜体 oblique斜体(强制斜体)
font-weigth:字体加粗 normal正常粗 bold一般加粗 bolder着重加粗 lighter轻微加粗 number:100-900之间的加粗
4.display属性(展示属性)
5.float浮动属性
不要纠结什么时候用,到后期会用框架来处理
6.边框border属性
-
一起设置元素边框的宽度、类型、颜色
-
单独设置边框的宽度、类型、颜色
border-color
border-width
border-style边框类型dotted:点线 dashed:虚线 solid:实线 double:两个边框 groove:3D沟槽边框 ridge:3D脊边框 inset:3D嵌入边框 outset:3D突出边框
-
设置属性值的顺序:
设置一个属性值:表示四个边框均一致
设置两个属性值:表示上下一致,左右一致
设置三个属性值:表示上右下不一致,左右一致
设置四个属性值:表示四个框都不一致
-
border-collapse:设置是否将表格边框折叠为单一边框
属性值:collapse(单元格边框合并,常用来合并table中的边框)
separate(默认,单元格边框独立)
7.内边距padding属性:
用来设置内边距:(顺序:上右下左)
设置一个值:四个方向一致
设置两个值:上下一致,左右一致
设置三个值:上右下不一致,左右一致
设置四个值:四个方向都不一致
![加粗样式](https://img-blog.csdnimg.cn/20210201215220209.p
使用top right bottom left 可单独设置四个方向的内边距。
8.外边距margin
道理同padding一样,使用top right bottom left 可单独设置四个方向的外边距。