CSS入门

最新推荐文章于 2024-06-14 14:36:26 发布

王大眼睛�

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量104

点赞数

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

本文链接：https://blog.csdn.net/pong_dong/article/details/131707670

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、css基本使用

1.css概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
多个样式定义可层叠为一个

2.css作用

在这里插入图片描述

Css是可以把页面布局，字体布局，背景颜色，字体颜色修改的，就好比毛坯房和精装房的区别。HTML可以把网页的元素铺出来，css把HTML页面进行美化。

二、css基本样式

文档流的顺序：上左下右
行级标签：按照文档流的顺序依次排列
排列块级标签：独占一行

1. CSS基本语法

在这里插入图片描述

<style>
    h1{
        color: aqua;
    }
    /* h1是选择器，{}里color:coral; 是声明 */
    /* color是属性，coral是值 */
</style>
<body>
    <h1>欣知大数据</h1>
</body>

运行结果：
在这里插入图片描述

2. 基本样式

宽：width:100px;
高：height:100px;
背景颜色：background-color: aqua;
注意：行级标签设置的宽高不起作用，行级标签的宽高根据内容的大小自适应。

<style>
    h1{
        color: aqua;
        width: 200px;
        height: 100px;
        background-color: coral;
    }
    b{
        width: 200px;
        height: 100px;
        background-color: beige;
    }
    /* 块级标签可以设置宽、高、背景颜色 */
    /* 但是行级标签的宽高是根据内容自适应的，设置宽高不起作用 */
</style>
<body>
    <h1>欣知大数据</h1>
    <b>欣知大数据</b>
</body>

运行结果：
在这里插入图片描述

3. 注释

css注释以 /* 开始，以 */ 结束。

三、css引入方式

1. 内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。

<div class="a" style=" 样式 ">我是demo。</div> 
demo.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
</head>
<body>
	<div class="a" style="color:blue">
		我是demo。
	</div>
</body>
</html>

2. 嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。

<head> <style> 样式 </style> </head>
demo.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<style>
		.a{
			font-weight: bold;
			width: 200px;
			background: #efefef;
		}
	</style>
</head>
<body>
	<div class="a">
		我是demo。
	</div>
</body>
</html>

3. 外联式Linking（也叫外部样式）：将网页链接到外部样式表。

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
demo.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<link rel="stylesheet" href="./mystyle.css">
</head>
<body>
	<div class="a">
		我是demo。
	</div>
</body>
</html>
mystyle.css 文件：
.a{
    font-size:18px;
    color:red;
}

注意：@import 外部引入方式不建议使用。
在这里插入图片描述

四、css样式表优先级

（嵌入样式）Inline style > （内联样式）Internal style sheet >（外联样式）External style sheet > 浏览器默认样式
上面我们介绍到三种引入样式的方式，这三种样式可重叠使用，即可以在使用外联样式的同时使用内页样式，同时可在行内标注。
外联样式（设置公用样式文件，统一各个页面风格）
内页样式（设置页面样式，统一页面各同类项风格）
行内样式（设置单独样式，如强调不同颜色、不同字体大小等）

五、css选择器

1. 全局选择器 *

全局通用的样式选择器又叫做通配符选择器

<style>
    *{
        padding: 0;
        margin: 0;
    }
</style>
<body>
    <ul>
        <li>padding 内填充</li>
        <li>margin 外边距</li>
        <li>盒模型</li>
    </ul>
</body>

在这里插入图片描述

2. 标签选择器

HTML中定义的标签可以作为选择器

<style>
    p{
        font-size: 14px;
    }
    b{
        color: coral;
    }
</style>
<body>
    <p>我是HTML中的段落标签</p>
    <b>我是HTML中的加粗标签</b>
</body>

运行结果：
在这里插入图片描述

3. 类选择器

<style>
    .className{
        color: coral;
    }
</style>
<body>
    <b class="className">我是HTML中的加粗标签</b>
</body>

运行结果：
在这里插入图片描述

4. id 选择器

<style>
    #id{
        color: coral;
    }
    /* id书写格式：#id名 */
    /* id选择器独一无二（一个id名只能定义一次，类名可以重复） */
</style>
<body>
    <b id="id">我是HTML中的加粗标签</b>
</body>

运行结果：
在这里插入图片描述

5. 群组选择器

<style>
    b,p,span{
        color: coral;
    }
    /* 群组选择器书写格式：标签名,标签名,标签名 */
</style>
<body>
    <p>我是HTML中的段落标签</p>
    <b>我是HTML中的加粗标签</b>
    <span>我是HTML中的span标签</span>
</body>

运行结果：
在这里插入图片描述

6. 层次选择器

后代选择器空格
子代选择器 >
注：父子关系必须是上下级关系紧挨在一起

<style>
    /* 后代选择器 空格 ： 父 子 孙 …… */
    /* 影响范围：不止是父对子，对子子孙孙同样影响 */
    #ul_1 li{
        list-style: none;
    }
    /* 子代选择器 > : 父>子 */
    /* 影响范围：只对下级产生影响 */
    #ul_1>li{
        list-style: circle;
    }
</style>
<body>
    <ul id="ul_1">
        <li>
            我是第一层li标签
            <ul>
                <li>我是第二层li标签</li>
                <li>我是第二层li标签</li>
            </ul>
        </li>
    </ul>
</body>

运行结果：
在这里插入图片描述

相邻兄弟 +

<style>
    /* 相邻兄弟 */
    div+p{
        color: violet;
    }
    /* 通用兄弟 */
    div~p{
        color: violet;
    }
</style>
<body>
    
    <div>
        <p class="a">这是div的上一个p兄弟</p>
        <div>这是div</div>
        <p>这是div下一个p兄弟</p>
        <p>这是div其他p兄弟</p>
        <p>这是div其他p兄弟</p>
        <p>这是div其他p兄弟</p>
        <p>这是div其他p兄弟</p>
        <p>这是div其他p兄弟</p>

    </div>
</body>

在这里插入图片描述

通用兄弟 ~

在这里插入图片描述
注：兄弟选择器只对他下面的兄弟生效，不对上面的兄弟生效

7. 伪类选择器

hover选择器
选择鼠标移到链接上的样式

<style>
    a:hover{
        cursor: pointer;
        background: darkorange;
    }
</style>
<body>
    <div>
        <a href="">这是一个a标签</a>
    </div>
</body>

8. 属性选择器

下面的例子是把包含标题（title）的所有元素变为蓝色：

<style>
    [title]{
        color: blue;
    }
</style>
<body>
    <h1 title="页面title">我的第一个页面</h1>
</body>

执行结果：
在这里插入图片描述

六、选择器优先级

优先级顺序：
下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：
全局选择器（*） < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式 < !important
当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖 CSS 中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important 规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

权重计算：
内联样式表的权值最高 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
优先级法则：
选择器都有一个权值，权值越大越优先；
当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；
继承的 CSS 样式不如后来指定的 CSS 样式；
在同一组属性设置中标有 “!important” 规则的优先级最大；