wep前端入门03_CSS基础选择器

最新推荐文章于 2022-08-04 23:56:06 发布

Simon没有猫

最新推荐文章于 2022-08-04 23:56:06 发布

阅读量168

点赞数

分类专栏： WEP前端

本文链接：https://blog.csdn.net/weixin_43842051/article/details/103534917

版权

WEP前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS

1 CSS的概念

Cascading Style Sheets 层叠样式表
层叠 ：多个样式可以作用在同一个html的元素上，同时生效
作用 : 用于页面美化和布局控制

2 CSS的好处

1. 功能强大
2. 将内容展示和样式控制分离
    * 降低耦合度。解耦
    * 让分工协作更容易
    * 提高开发效率

3 CSS的使用

CSS与html结合方式

内联样式

在标签内使用style属性指定css代码
例如:<div style="color:red;">hello css</div>

内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码

代码演示

<style>
    div{
        color:blue;
    }
</style>

<div>hello css</div>

外部样式

1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件

代码演示

定义css文件
```
div{
	color:green;
}
```

引入css文件

<html>
	<head>
		<meta charset="utf-8" />
		<title>title</title>
        <!-- 引入a.css文件 -->
		<link rel="stylesheet" href="css/a.css" />
	</head>
	<body>
		<div>Hello CSS</div>
	    <div>Hello World</div>
	</body>
</html>

总结

1,2,3种方式 css作用范围越来越大
第1种方式不常用，后期常用2,3
第3种格式可以写为：
<style>
    @import "css/a.css";
</style>

2.4 CSS的语法

格式

选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    ...
}

什么是选择器

筛选具有相似特征的元素

注意事项

每一对属性需要使用；隔开，最后一对属性可以不加；

2.5 CSS选择器

基础选择器

id选择器

描述

选择具体的id属性值的元素.建议在一个html页面中id值唯一

语法
```
#id属性值{}
```

元素选择器

描述

选择具有相同标签名称的元素

语法
```
标签名称{}
```

注意事项

id选择器优先级高于元素选择器

类选择器

描述

选择具有相同的class属性值的元素。

语法
```
.class 属性值{}
```

注意事项

类选择器选择器优先级高于元素选择器

扩展选择器

选择所有元素 [不用]
```
语法： *{}
```
并集选择器/组选择器
```
语法： 选择器1,选择器2{}
```
后代选择器
```
语法：  选择器1 选择器2{}
```
子元素选择器
```
语法：  选择器1 > 选择器2{}
```

属性选择器,一般用于input表中的type属性的选择

元素名称[属性名="属性值"]{}  input[type='属性的名称']

伪类选择器

元素:状态{}

状态

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

2.6 CSS的属性

字体、文本

font-size ：字体大小
color ：文本颜色
text-align ：对其方式
line-height：行高

背景

background

边框

border：设置边框，符合属性
border-bottom : 设置底部边框
border-left : 设置左边边框
border-right : 设置右边边框
`border-top: 设置顶部边框

尺寸

width：宽度
height：高度

盒子模型

margin：外边距

padding：内边距

默认情况下内边距会影响整个盒子的大小
box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小

float：浮动
- left : 左浮动
- right : 右浮动

Simon没有猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
wep前端入门03_CSS基础选择器

CSS1 CSS的概念Cascading Style Sheets 层叠样式表层叠：多个样式可以作用在同一个html的元素上，同时生效作用 : 用于页面美化和布局控制2 CSS的好处1. 功能强大2. 将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作更容易 * 提高开发效率3 CSS的使用CSS与html结合方式内联样式在标签内...
复制链接

扫一扫

专栏目录