CSS

最新推荐文章于 2024-09-09 11:03:57 发布

ouuxxxi

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量408

点赞数

分类专栏： HTML CSS 文章标签： css

本文链接：https://blog.csdn.net/m0_45097186/article/details/106943642

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

CSS :页面美化和布局控制

一、概念:
Cascading style Sheets 层叠样式表

【层叠】
多个样式可以作用在同一个html的元素上，同时生效。

【优点】

1.功能强大
2.将内容展示和样式控制分离

降低耦合度、解耦
让分工协作更容易
提高开发效率

二、CSS的使用:
css与htm1结合方式

（1）、内联样式

在标签内使用style属性指定css代码

如: <div style="color:red;"> 你好 </div>
“你好”字样变为红色

（2）、内部样式
在head标签内，定义style标签, style标签的标签体内容就是css代码

如:
<style>
div{

color:blue;

}
</style>

<div>你好</div>

（3）、外部样式

1.定义css资源文件。

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

如:
css文件夹下的a.css文件:

div{

color:green;

}

<link rel="stylesheet" href="css/a.css">

<div>你好</div>
<div>你好</div>

【注意】

1,2, 3种方式css作用范围越来越大
1方式不常用，后期常用2,3
3方式格式可以写为:

<style>

@import "css/a.css";

</style>

三、css语法：
（1)、格式

选择器 {

属性名1:属性值1;

属性名2:属性值2;
}

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

（2）、选择器：筛选具有相似特征的元素

基础选择器

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

语法: #id属性值{}

<head>

<style>

#div1{

color: red ;

}
</style>

< /head>

<body>

<div id=" div1" >你好</div>

<div>你好</div>

</body>

(“你好” 变成红色)

元素选择器
选择具有相同标签名称的元素
id选择器优先级高于元素选择器

*语法:标签名称{}

<style>

div{

color: green;

}

</sty1e>

<body>

<div id=" div1" >传智播客</div>

<div>你好</div>

</body>

3. 类选择器

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

语法: .class属性值{}

代码：


.c1s1{

color: blue;

}

<body>

<div c1as="c1s1" >你好</div>

</body>

扩展选择器

1.选择所有元素:

语法: *{}

2.并集选择器:

选择器1 ,选择器2{}

3.子选择器: 筛选选择器1元素下的选择器2元素

语法:选择器1 选择器2{}

在这里插入图片描述

4.父选择器: 筛选选择器2的父元素选择器1

*语法: 选择器1 >选择器2{}

在这里插入图片描述

给p标签的父元素div标签加边框
在这里插入图片描述

5.属性选择器:
选择元素名称，属性名=属性值的元秦

语法:元秦名称[属性名="属性值 "]{}

在这里插入图片描述

**6.伪类选择器:**选择一些元素具有的状态.

语法:元素:状态{}

如: <a>

状态:
link :初始化的状态
hover :鼠标悬浮状态
active :正在访问状态
visited :被访问过的状态

在这里插入图片描述

（3）、属性：

1.字体、文本

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

在这里插入图片描述

背景
background

.
边框
border :设置边框，符合属性
尺寸
width:宽度
height :高度
盒子模型
margin :外边距
padding :内边距

默认情况下内边距会影响整个盒子的大小

box-sizing: border-box:
设置盒子的属性，让width和height就是最终盒子的大小

一个大盒子里面有个小盒子居中
在这里插入图片描述

float :浮动
left
right

ouuxxxi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSS :页面美化和布局控制一、概念:Cascading style Sheets 层叠样式表【层叠】多个样式可以作用在同一个html的元素上，同时生效。【优点】1.功能强大2.将内容展示和样式控制分离降低耦合度、解耦让分工协作更容易提高开发效率二、CSS的使用:css与htm1结合方式（1）、内联样式在标签内使用style属性指定css代码如: <div style="color:red;"> 你好 </div>“你好”字样变为红色（2）、内
复制链接

扫一扫

专栏目录