2024-06-10 CSS学习日记

小mei

已于 2024-06-16 14:07:39 修改

阅读量360

点赞数 5

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

于 2024-06-10 17:02:09 首次发布

本文链接：https://blog.csdn.net/meizhenglong123/article/details/139573792

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS(层叠样式表)

基础选择器（单个选择器）：

标签选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOCUMENT</title>
</head>
<style>
    p {
        color: green;
    }
</style>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
</body>
</html>

优点：能快速为页面中同类型的标签设计统一样式。
缺点：不能差异化样式，只能选择当前所有标签。

类选择器：

样式点定义，结构类调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOCUMENT</title>
</head>
<style>
    .red {
        color: red;
    }
</style>
<body>
    <p class="red">男生</p>
    <p>男生</p>
    <p>男生</p>
</body>
</html>

多类名：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOCUMENT</title>
</head>
<style>
    .red {
        color: red;
    }
    .font35 {
        font-size: 35px;
    }
</style>
<body>
    <p class="red font35">男生</p>
</body>
</html>

开发场景：
（1）可以把一些标签相同样式的放到一个类里面。
（2）节省css代码

id选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOCUMENT</title>
</head>
<style>
    #nav{
        color: red;
    }
</style>
<body>
    <div id="nav">男生</div>
</body>
</html>

只能调用一次。

通配符选择器：

* {
        color: red;
    }

CSS字体属性：

字体属性用于定义字体系列：

		font-family设置字体
		font-size  设置字体大小
		font-weight设置字体粗细
		font-style 设置字体样式

CSS文本属性：

文本颜色：

div {
        color: red;
}

对齐文本（水平对齐）：

div {
        color: red;
        text-align: center;
}

装饰文本：

装饰文本可以给文本添加属性，给文本添加下划线，删除线，上划线。

div {
        color: red;
        text-align: center;
        text-decoration: none; 
        //none 默认 underline 下划线  overline 上划线  line-through 删除线
    }

文本缩进：

div {
        color: red;
        text-align: center;
        text-decoration: none; 
        //none 默认 underline 下划线  overline 上划线  line-through 删除线
        text-indent: 20px;
    }

行间距：

div {
        color: red;
        text-align: center;
        text-decoration: none; 
        text-indent: 20px;
        line-height: normal;
    }

CSS引入方式：

内部样式表：

内部样式表是写到html标签内，是将所有CSS代码抽取出来，单独放到<style>标签中。
可以控制整个页面的元素样式，并没有完全分离。

行内样式表：

行内样式表是在元素标签内部的style标签中设置属性，适用于简单样式。

外部样式表:

样式单独写到CSS文件中，之后把CSS文件引入到HTML标签使用。

CSS复合选择器：

复合选择器是建立在基础选择器上，对基础选择器进行组合形成的。

后代选择器：

后代选择器可以选择父元素里面的子元素，外层标签写在里面，内层标签写在后面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOCUMENT</title>
</head>
<style>
    ul li{
        color: red;
    }
</style>
<body>
    <ul>
        <li>男生</li>
    </ul>
</body>
</html>

子选择器：

子元素选择器只能选择某元素最近一级子元素。

.nav>a{
        color: red;
    }

并集选择器：

并集选择器可以选择多组标签，同时为他们定义样式，用于集体声明。

div,p{
        color: pink;
    }

伪类选择器：

伪类选择器用于向某些选择器添加特殊效，比如给链接添加特殊效果，或选择第一个，第n个元素。

	a:link 			选择所有未被访问过的链接
	a:visited       选择所有已被访问过的链接
	a:hover      	鼠标指针位于其上的链接
	a:active   		按下未弹起的链接

focus选择器：

用于获取焦点的表单元素。

CSS元素显示模式:

元素显示模式就是元素以什么样的方式进行显示。
HTML元素可以分为块元素和行内元素。

块元素：

	<h1></h1>
    <p></p>
    <div></div>
    <ul></ul>
    <ol></ol>
    <li></li>

CSS的背景:

背景颜色：

div {
        background-color: red;
    }

背景图片：

div {
        background-color: red;
        background-image: none;
    }

背景平铺：

background-repeat: repeat no-repeat repeat-y repeat-y;

背景图片位置：

 background-position: x y;

背景图像固定：

background-attachment: scroll fixed;

CSS三大特性：

层叠性：

相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。哪个距离结构近，就执行哪个样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOCUMENT</title>
</head>
<style>
    div {
        color: red;
    }

    div {
        color: pink;
    }
</style>
<body>
    <div>1</div>   粉色
</body>
</html>

继承性：

子标签会继承父标签的某一些样式，如文本颜色和字号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOCUMENT</title>
</head>
<style>
    div {
        color: red;
    }
</style>
<body>
    <div>
        <p>男生</p>  //红色
    </div>
</body>
</html>

可以继承的：text- , font-, line-以及color属性。

优先级：

当一个元素指定多个选择器，就会有优先级的产生。
!important > 行内样式>id选择器>类选择器，伪类选择器>元素选择器>继承，*

注意如果是复合选择器，则会有权重叠加的问题，需要计算权重

页面布局要学习三大核心，盒子模型，浮动和定位。

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子BOX
利用CSS设置好盒子样式，然后摆到相应位置。
往盒子里面装内容

盒子模型：

所谓盒子模型就是把HTML页面中的布局元素看成一个矩形的盒子。封装周围的HTML元素，包括：边框，外边距，内边距和实际内容。

组成：边框，内容，内边距，外边距。

边框：

border可以设置元素的边框，边框有三部分组成：宽度，颜色，样式。

div {
        width: 300px;
        height: 200px;
        border-width: 5px;
        border-style: dashed;  
        border-color: red;
    }

边框会影响盒子宽度。

内边距：

padding属性用于设置内边距，即边框与内容之间的距离。

		padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        还有复合写法

padding会影响盒子大小。

外边距：

		margin-left: ;
        margin-right: ;
        margin-top: ;
        margin-bottom: ;

小mei

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录