CSS基础

最新推荐文章于 2025-05-11 11:26:37 发布

Cherish-G

最新推荐文章于 2025-05-11 11:26:37 发布

阅读量37

点赞数

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/m0_73430222/article/details/132064672

版权

CSS基础

CSS概述

CSS概述

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为 .css。

CSS基本语法

选择器 {属性:属性值; 属性:属性值;}
例：h1 {color:blue; font-size:10px;}

	<head>
		<style>
			h4 {color: red;}
		</style>
	</head>
	<body>
		<h4>标题标签</h4>
	</body>

CSS基本样式

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

CSS中颜色表示

单词表示：red、green、blue…
十六进制表示：取值范围（0~9 && a~f ）
RGB三原色表示：取值范围（0~255）

CSS注释
CSS注释以 /* 开始，以 */ 结束

CSS引入方式

1. 内部样式表

当单个文档需要特殊的样式时，应该使用内部样式表。
可以使用

	<head>
		<style>
		div {
		width: 200px;
		height: 300px;
		background-color: red;
		}
		</style>
	</head>
	<body>
		<div>这是div标签</div>
	</body>

2. 内联样式表

当样式仅需要在一个元素上应用一次时，要使用内联样式，你需要在相关的标签内使用样式(style)属性。style属性可以包含任何CSS属性。

	<body>
		<p style="width: 200px; height:300px; background-color:blue;">段落标签</p>
	</body>

3. 外部样式表

当样式需要应用于很多页面时，最优选择是使用外部样式表。可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。

 	<head>
 	<link rel="stylesheet" href="./index.css">
		<style>
		/* 不建议使用 */
       @import url(./index.css);
		</style>
	</head>
	<body>
		<div>这是div标签</div>
	</body>

引入外部样式表的方法与@import的区别

	@import	link
从属关系	是CSS提供的语法规则，只有带入样式表的作用	link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，REL链接属性等
加载顺序	加载页面时，@import引入的样式表在页面加载完毕后被加载	同时加载
权重	小	大

CSS样式表优先级

一、就近原则
相同样式优先级：
当设置相同样式时，后面的优先级较高。
二、内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置相同样式，那么后写的样式优先级更高
三、单一样式优先级
style 行间 > id >class >tag > * >继承
注：！important强制优先

CSS中的冲突、层叠、继承

**层叠：**对同一元素进行不同样式表的设置，所有的样式进行叠加的效果
**冲突：**对同一元素设置相同的属性样式，就会产生冲突
**继承：**在子父关系中，文本样式可以被继承，布局样式不能被继承

CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        /* 1、全局选择器 *{} */
        * {
            padding: 0;
            margin: 0;
        }
        /* 2、标签选择器 标签名{} */
        div {
            font-size: 40px;
            color: red;
        }
        /* 3、类选择器 .类名{} */
        .thick {
            font-size: 30px;
            color: coral;
        }
        /* 4、id选择器(独一无二，id只能定义一次) #id名{} */
        #paragraph {
            font-size: 40px;
            color: green;
        }
        /* 5、群组选择器 标签名，标签名{} */
        p,b,span {
            background-color: deeppink;
        }
        /* 6、层次选择器 */
        /* (1)、后代选择器 空格 */
        #drink li {
            font-size: 30px;
            color: blue;
        }
        /* (2)、子代选择器 > */
        #fruit>li {
            font-size: 40px;
            color: magenta;
        }
        /* (3)、相邻兄弟 + */
        li+a {
            color: crimson;
        }
        /* (4)、通用兄弟 ~ */
        li~div {
            background-color: darkorange;
        }
        /* 7、伪类选择器 */
        /* (1)、UI伪类选择器 a标签常用 */
        /* 初始默认状态 */
        li+a:link {background-color: black;}
        /* 超链接被访问后的状态 */
        li+a:visited {background-color: red;}
        /* 超链接鼠标悬浮时的状态 */
        li+a:hover {background-color: orange;}
        /* 超链接被激活(按下)时的状态 */
        li+a:active {background-color: blue;}
        /* (2)、结构型伪类选择器 */
        /* first-child 第一个子元素 */
        #fruit li:first-child {color: black;}
        /* last-child 最后一个子元素 */
        #fruit li:last-child {background-color: red;}
        /* nth-child() 元素的第n个相同元素 */
        #demo li:nth-child(3) {font-size: 30px;color: green;}
    </style>
</head>
<body>
    <ul>
        <li>padding 内填充</li>
        <li>margin 外边距</li>
        <li>盒模型</li>
    </ul>
    <div>div标签</div>
    <b class="thick">我是HTML中的加粗标签</b><br><br>
    <p id="paragraph">我是HTML中的段落标签</p><br>
    <p>我是段落标签</p><br>
    <b>我是加粗标签</b><br><br>
    <span>我是span标签</span><br>
    <ol id="drink">
        <li>
            <ol>
                <li>雪碧</li>
                <li>可口可乐</li>
                <li>柠檬水</li>
            </ol>
        </li>
    </ol>
    <ol id="fruit">
        <li>苹果</li>
        <li>香蕉</li>
        <li>桃子</li>
    </ol><br>
    <ul id="demo">
        <li>我是第一个li</li>
        <a href="#">我是与li相邻的a</a>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <div>我是div</div>
    </ul>
</html>

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