CSS第一天

发表于2023-08-20更新于2023-09-01

CSS类型

1.内联样式(行内样式)

通过标签的 style 属性来设置元素的样式，语法格式为：

1
<标签名 style="属性1:属性值1; 属性2:属性值2; ..."> 内容 </标签名>

2.嵌入式（内部样式表)

将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义。语法格式为：

1
2
3
4
5
<head>
	<style type="text/css">
	    选择器 {属性1:属性值1; 属性2:属性值2; ...}
	</style>
</head>

3.外链式（外部样式表）

将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到 HTML 文档中。语法格式为：

1
2
3
<head>
  <link href="CSS文件的路径"  rel="stylesheet" type="text/css"/>
</head>

href 定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径。rel 定义当前文档与被链接文档之间的关系，在这里需要指定为 “stylesheet”，表示被链接的文档是一个样式表文件。type=”text/css”通知浏览器要加载一个css文件。

注意:三种方法的优先级 内联式 > 嵌入式 > 外链式 但是“嵌入式 > 外链式” 有一个前提：嵌入式 CSS 样式的位置一定在外链式后面。

CSS常用的选择器

1. 元素选择器

语法 : 标签名{}

作用 : 选中对应标签中的内容

1
p {}                    div {}                  h1 {}

2. 类选择器(class选择器)

语法 : .class属性值{}

作用 : 选中对应class属性值的元素

1
2
3
4
5
 <p id="A">段落1</p>
 <p id="B">段落1</p>
 <p id="C">段落1</p>

.A{}    .B{}    .C{}

注意:class里面的属性值不能以数字开头,如果以符号开头,只能是’_’或者’-‘这两个符号,其他的符号不可以,一个class里面可以有多个属性值

3. id选择器

语法 : #id属性值{}

作用 : 选中对应id属性值的元素

例子 :

段落1

1
2
3
4
<p id="B">段落1</p>
<p id="C">段落1</p>

#A{} , #B{} ,

注意 : id的属性值只能给1个,可以重复利用,不能以数字开头

4. 通配符选择器

语法 : *{}

作用 : 让页面中所有的标签执行该样式,通常用来清除间距

1
2
3
4
 * {
     margin: 0; //外间距
     padding: 0; //内间距
}

5. 群组选择器

语法 : 选择器1,选择器2,选择器3…{}

作用 : 同时选中对应选择器的元素

1
2
3
P,.A.#A,div{

}

6. 关系选择器

1.后代选择器

后代选择器也叫包含选择器，祖先元素直接或间接的包含后代元素

1
2
3
4
 .box p{
  width: 200px;                --- 选择类名为box下面所有的p标签
  height: 200px;
}

2. 子代选择器 >

父元素直接包含子元素,子元素直接被父元素包含

1
2
3
4
5
6
/*子选择器选中的是.box下所有的儿子p*/
.box>p{
   width: 200px;
   height: 200px;
   background-color: yellow;
 }

3.相邻兄弟选择器 +

1
2
3
4
5
6
/* 相邻兄弟,会选择到box后面紧挨着的p, */
 .box+p{
   width: 200px;
   height: 200px;
   background-color: yellow;
 }

4.通用兄弟选择 ~

1
2
3
4
5
6
/*通用兄弟选择器,会选择到.box后面所有的兄弟p*/
.box~p{
   width: 200px;
   height: 200px;
   background-color: yellow;
 }

7. 伪类选择器

1
2
3
4
5
6
 表单伪类                   input ：focus    
链接伪类选择器
a:link           --- 选所有未被访问的链接
a:visited       ---已被访问链接
a:hover         ---鼠标再a之上的链接
a:active        --- 鼠标按下未被弹起的链接

元素类型

元素分为三种类型元素分别为

1
2
3
4
5
6
块元素                                  --- 独占一行可改变宽高
行内元素                                 ---- 一行显示 不可改变宽高 宽高随字体大小
行内块元素                                ---- 一行但可设置大小  input
display：block；                    --- 转化为块元素 
display：inline；                   --- 转化为行内元素
display：inline-block；            ---- 转化为行内块元素

字体样式font 与文本属性

1 字体样式font

1
2
3
4
5
6
font-family                                      //字体类型
font-size                                        //字体大小
font-weigh                                       //文字粗细（700变粗 400不变）
font-style                                       //字体样式
font：样式 粗细 大小 /行高  类型                  //复合属性不可改变位置
（大小以及类型不可省略否则无用）

2 文本属性

1
2
3
4
5
6
color                              //文本颜色
text-align                         //水平对齐方式
text-decoration                    //装饰文本（none 取消装饰 underline 下划线）
text-indent                       //文本缩进（em 一个文字的单位）
line-height                       //行间距
line-height 和行高（height）相等实现文字垂直居中    //单排文字(小于的偏上大于偏下)

3 行高的继承以及计算

1
2
3
4
5
6
7
css有三个非常重要的特性 : 层叠性  继承性 优先级

行高可以跟单位也可以不跟单位

如果子元素没有设置行高则会寻找父级的行高进行继承

body行高1.5 这样的写法就是里面子元素可以根据文字大小自动调整行高

4 行间距计算方式

image-20230817145338781