CSS学习笔记

最新推荐文章于 2024-05-19 17:21:21 发布

阿爷杂货店

最新推荐文章于 2024-05-19 17:21:21 发布

阅读量82

点赞数

分类专栏：学习笔记文章标签： css css3 前端

本文链接：https://blog.csdn.net/GrandpaStore/article/details/122897580

版权

学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.CSS 初识

Cascading Style Sheets ：层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
好处：
- 功能强大
- 将内容的展示和样式控制分离，降低耦合度
- 让分工协作更容易；提高开发效率

2.CSS与HTML的结合方式

2.1 内联样式（不推荐）

在style属性指定CSS代码

 <div style="color: red">hello</div>

2.2 内部样式

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <ul type="disc"></ul>
    
<!--在head标签内，定义style标签，style标签的标签体内容就是CSS代码-->
    <style>
        div{
            color: blue;
        }
    </style>

</head>

<body>
    <div>hello</div>
</body>

2.3 外部样式

定义CSS资源文件
```
div{
    color: red;
}
```
在head标签内，定义link标签，引入外部的资源文件
```
 <link rel="stylesheet" href="css/test.css">
```

2.4 注意

1、2、3中方式，CSS的作用域越来越大
1方式不常用。2、3方式常用

第3方式可以写为（不常用）

<style>
    @import "css/test.css";
</style>

3.CSS语法

3.1 格式

选择器{
	属性名1：属性值1；
	属性名2：属性值2；
	......
}

选择器：赛选具有相同特征的元素
每一对属性需要用’’；’‘隔开，最优一对属性可以不加’’；’’

3.1 选择器

基本选择器

id选择器(优先级高)：选择具体的id属性值的元素，建议在html页面中id值唯一

/*
	语法：
	#id{
		......
	}
*/
#div1{
    color: red;
}

<!--	只有div1中的hello变红	-->
<div id="div1">hello</div>
<div id="div2">world</div>

类选择器（优先级中）：选择具有相同的class属性值的元素

/*
	语法：
	.clsss名称{
		......
	}
*/
.cls1{
    color: blue;
}

<div class="cls1">aye</div>

元素选择器（优先级低）：选择具有相同标签名称的元素

/*
	语法：
	标签名称{
		......
	}
*/
div{
    color: green;
}

<!--	
	hello变红，world变绿
	id选择器优先级高于元素选择器
-->
<div id="div1">hello</div>
<div >world</div>

扩展选择器

*****：选择所有元素
选择器1，选择器2：并集选择器

选择器1 选择器2：子选择器；选择选择器1元素下的选择器2元素

div p{
    color: red;
}

<body>
    <div>
        <!--	变红	-->
        <p>div下的p标签</p>
    </div>

     <!--	不变	-->
    <p>p标签</p>
</body>

选择器1（父） > 选择器2：父选择器，筛选选择器2的父选择器1

属性选择器：选择元素名称，属性名=属性值的元素

/*
	选择imput标签下，type属性为text值的元素
*/
input[type="text"]{
    border: 1px solid;
}

伪类选择器：选择一些元素具有的状态

/*
	元素：状态{}
	状态如：
	link：初始化状态
	visited：被访问状态
	active：正在访问状态
	hover：鼠标悬浮（移动到）状态
*/
a:link{
    color: red;
}

3.2 属性（常见，具体查看文档）

https://www.runoob.com/cssref/css-reference.html

3.2.1 字体、文本

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

3.2.2 背景

background：是复合属性

3.2.3 边框

border：是复合属性，有boder-bottom等

3.2.4 尺寸

width：宽度
height：高度

4. 盒子模型

属性

margin(外边距) - 清除边框外的区域，外边距是透明的。
border(边框) - 围绕在内边距和内容外的边框。
padding(内边距) - 清除内容周围的区域，内边距是透明的。
content(内容) - 盒子的内容，显示文本和图像。

CSS box-model

float：浮动属性，使元素向左或者向右移动，其他周围的元素也会重新1排列
- left
- right
clear：清除浮动

在这里插入图片描述

注意

默认情况下，内边距会影响盒子的大小。可以使用box-sizing：boder-box设置盒子属性，让width和height为最终盒子的大小

阿爷杂货店

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记

1.CSS 初识Cascading Style Sheets ：层叠样式表层叠：多个样式可以作用在同一个html的元素上，同时生效好处：功能强大将内容的展示和样式控制分离，降低耦合度让分工协作更容易；提高开发效率2.CSS与HTML的结合方式2.1 内联样式（不推荐）在style属性指定CSS代码 <div style="color: red">hello</div>2.2 内部样式在head标签内，定义style标签，style标签的标签体内容就
复制链接

扫一扫