(二)CSS基础

最新推荐文章于 2024-11-04 07:45:03 发布

码雲.py

最新推荐文章于 2024-11-04 07:45:03 发布

阅读量166

点赞数

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/weixin_43814474/article/details/103812263

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

如果说HTML撑起了一个框架，那么CSS就是用来修饰框架的美感，好像美颜特效。

简介

CSS全称为： Cascading Style Sheets ，意为层叠样式表，与HTML相辅相成，实现网页的排版布局与样式美化

使用方式

1. 行内样式/内联样式

借助于style标签属性，为当前的元素添加样式声明

<标签名 style="样式声明">

CSS样式声明 : 由CSS属性和值组成

style="属性:值;属性:值;"

常用CSS属性 :

设置文本颜色 color:red;
设置背景颜色 background-color:green;
设置字体大小 font-size:32px;

2. 内嵌样式

借助style标签，在HTML文档head标签中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离
需借助于CSS选择器到HTML 中匹配元素并应用样式

<style>
	选择器{
	属性:值;
	属性:值;
	}
</style>

选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式

/*标签选择器 : 根据标签名匹配所有的该元素*/  
p{
	color:red;
}

3. 外链样式表

创建外部样式表文件,后缀使用.css

在HTML文件中使用标签引入外部样式表

<link rel="stylesheet" href="URL" type="text/css">

样式表文件中借助选择器匹配元素应用样式

样式表特征

1. 层叠性

多组CSS样式共同作用于一个元素

2. 继承性

后代元素可以继承祖先元素中的某些样式
例 : 大部分的文本属性都可以被继承

3. 样式表的优先级

优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。(就近原则)

行内样式的优先级最高
文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
浏览器默认样式和继承样式优先级较低

CSS 选择器

1. 作用

匹配文档中的某些元素为其应用样式

2. 分类

1). 标签选择器

根据标签名匹配文档中所有该元素
语法 :

标签名{
  属性:值;
}

2). id选择器

根据元素的 id 属性值匹配文档中惟一的元素，id具有唯一性，不能重复使用
语法 :

#id属性值{
  属性:值;	
}

注意 :id属性值自定义

可以由数字，字母，下划线，- 组成，不能以数字开头
尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示

3). class选择器/类选择器

根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用
语法 :

.class属性值 {
  属性:值; 	
}

特殊用法 :

类选择器与其他选择器结合使用
注意标签与类选择器结合时,标签在前,类选择器在后
例 : a.c1{ }
class属性值可以写多个,共同应用类选择器的样式
例 :
.c1{ }
.c2{ }

<p class="c1 c2"></p>

4). 群组选择器

为一组元素统一设置样式
语法 :逗号分隔

selector1,selector2,selector3{
  属性:值;	         
}

5). 后代选择器

匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)
语法 :空格分隔匹配selector1中所有满足selector2的后代元素

selector1 selector2{
  属性:值;
}

6). 子代选择器

匹配满足选择器的所有直接子元素
语法 :大于号分隔表示下一级

selector1>selector2{
  属性:值;
}

7). 伪类选择器

为元素的不同状态分别设置样式,必须与基础选择器结合使用
分类 :

:link 	 超链接访问前的状态
:visited 超链接访问后的状态
:hover	 鼠标滑过时的状态
:active  鼠标点按不抬起时的状态(激活)
:focus	 焦点状态(文本框被编辑时就称为获取焦点)

使用 :

a:link{
    /* 默认 text-decoration: underline; */
    /* 取消超链接下划线 */
    text-decoration: none;
}
a:visited{ }
.c1:hover{ }

注意 :

超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写
```
:link
:visited
:hover
:active
```

超链接常用设置 :

a{
	/*统一设置超链接默认样式(不分状态)*/
}
a:hover{
	/*鼠标滑过时修改样式*/
	/*过渡  当元素的样式发生变化时 可以在指定时间内完成 */
	/*语法  transition：发生变化的样式 完成变化的时间 */
	transition: width 1s,height 1s;
	/* linear:从开始到结束匀速变化 */
	transition: all 1s linear;
	/*鼠标滑过时变为手形*/
	cursor: pointer;
}

3. 选择器的优先级

使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

选择器	权重
标签选择器	1
(伪)类选择器	10
id选择器	100
行内样式	1000

复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和

群组选择器权重以每个选择器单独的权重为准，不进行相加计算
例 :

/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
 color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1  */
 color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
 color:blue;
}

标签分类及嵌套

1. 块元素

独占一行,不与元素共行;可以手动设置宽高,默认宽度与与父元素保持一致
例 : body，div， h1~h6，p，ul，ol，li，form，table(默认尺寸由内容决定)

2. 行内元素

可以与其他元素共行显示;不能手动设置宽高,尺寸由内容决定
例 : a，span， label，b，strong，i(斜体)，s(删除线)，u(下划线)，sub(上标)，sup(下标)

3. 行内块元素

可以与其他元素共行显示,又能手动调整宽高
例 : img，input，button (按钮)

4. 嵌套原则

块元素中可以嵌套任意类型的元素
p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素; p元素中如果嵌套其他的块元素，在浏览器渲染到其他块元素之后就会停止，p元素会变成两段，由浏览器自动补全而变成两个p
行内元素中最好只嵌套行内或行内块元素

span{
    width: 200px;
    height: 200px;
    background-color: #000;
    /* display 设置元素的显示方式 */
    /* 将span以块元素方式显示  可设置宽高  独占一行*/
    /* display: block; */
    /* 将span以行内块元素方式显示，可设置宽高，也能和其他行内块元素同行显示 */
    /* display: inline-block; */
    /* 隐藏元素 常用于页面隐藏样式 */
    display: none;
}