CSS学习小总结

最新推荐文章于 2024-07-14 12:36:02 发布

静渊谋

最新推荐文章于 2024-07-14 12:36:02 发布

阅读量65

点赞数

文章标签： css 学习正则表达式 html

本文链接：https://blog.csdn.net/weixin_59713645/article/details/130782593

版权

1.CSS介绍

1.1 W3C介绍

全名：World Wide Web Consortium，意为W3C组织或者万维网联盟。
组织作用：出网页标准。推出的标准就被称为W3C标准或web标准。
W3C标准或者叫web标准，web标准是一系列的标准。
结构层： HTML 用于描述网页的展示结构。
表现层： CSS 用于修饰装饰网页的美观度
行为层: JavaScript 用于完成页面的组件。（复杂动态，如按钮、动画、事件或者窗口等一些动态效果）

2. CSS：层叠样式表

2.1 引入

2.1.1 行内样式

又叫标签引入，即在标签内通过style属性实现。

仅对该标签起作用。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式</title>
</head>
<body>
    <!-- 单个样式 -->
    <h1 style="color: brown;">css行内样式引入</h1>
    <!-- 多个样式，用;号隔开 -->
    <h2 style="color: aqua; font-size: 36px;">css行内样式引入</h2>
</body>
</html>

2.1.2 导入样式

使用import关键字引入。

需先在head标签内写style标签，后

在style标签内使用@import（"css文件路径"）引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导入样式</title>
    <style>
        @import url("导入样式.css");
    </style>
</head>
<body>
    <h1>导入样式引入</h1>
</body>
</html>

h1
{
    color: blue;
}

2.1.3 内嵌样式

通过style标签实现。

style标签写在head标签内！

语法：

<style>
标签名
{
具体样式;
}
</style>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌样式</title>
    <style>
        h1
        {
            color: aqua;
            font-size: 36px;
        }
    </style>
</head>
<body>
    <h1>内嵌样式引入</h1>
</body>
</html>

2.1.4 外链样式

通过link标签引入外面所写的xxx.css，.css文件内写有样式。

先单独创建一个css文件，写入样式，然后在head标签内使用link标签引入。

路径使用“//”或“\\”该反斜杠

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外链样式</title>
    <link rel="stylesheet" href="外链样式.css"> <!-- href取值链接文件的地址，二者在通一文件夹下可直接使用文件名 -->
</head>
<body>
    <h1>外链样式引入</h1>
</body>
</html>

/* 注意，样式需要加到哪个标签就是用那个标签的名字 */
h1
{
    color: rgb(21, 246, 171);
    font-size: 36px;
}

.css文件语法：

标签名
{
	具体样式；
}

注

前端页面文件夹有分类，

分别存储

图片 ------- images

HTML文件 ------ html

JS文件 ------ js

CSS文件 ------ css

2.1.5 优先级

就近原则。

距离被修饰标签最近的样式最先显示，

如上文代码中的h1标签。

2.2 选择器

2.2.1 基本选择器

作用：与样式引入配合使用，通过相应的选择，再赋予样式
如：选择div标签，再赋予样式，那么被div标签修饰的内容就显示该样式

2.2.1.1 标签选择器

根据标签的名称设置对应的样式

用什么标签写什么标签

语法

标签名
{
	样式1;
	样式2;
	... ;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
    <style>
         /* 标签选择器 */
         div
        {
            width: 200px;
            height: 200px;
            color: blue;

        }
    </style>
    
</head>
<body>
    <div>这是一个div</div>
</html>

2.2.1.2 ID选择器

获取标签的ID属性去设置对应的样式

语法

#id属性取值
{
	样式1;
	样式2;
	... ;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
    <style>
        /* id选择器 */
        #one
        {
            color: brown;
        }
    </style>
    
</head>
<body>
    <p id="one">123</p>
</html>

2.2.1.3 类选择器

通过获取标签的class属性取值去设置对应的样式

语法

.class属性取值
{
	样式1;
	样式2;
	... ;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
    <style>
        /* 类选择器 */
        .boss
        {
            color: rgb(255, 0, 200);
        }
    </style>
    
</head>
<body>
    <div class="boss">456</div>
</html>

2.2.1.4 通配符选择器

通过*设置对应的样式

给每个标签设置对应的样式，即作用对象为全体标签，但是优先级最低

语法

*
{
	样式1;
	样式2;
	... ;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
    <style>
        /* 通配符选择器 */
        *
        {
            color: aquamarine;
        }
       
    </style>
    
</head>
<body>
    <div>这是一个div</div>
    <p id="one">123</p>
    <div class="boss">456</div>
    <hr>
    <ul>
        <li>列一</li>
    </ul> 
</html>

2.2.1.5 优先级

选择器优先级是绝对的，级别如下：

id > 类 > 标签 > 通配符

2.2.2 包含选择器

2.2.2.1 子代选择器

获取某个标签的第一级子标签

语法

.class属性取值 > 子级标签名
{
	样式1;
	样式2;
	... ;
}

2.2.2.2 后代选择器

获取某个标签的所有子标签,包括一级、二级等等

语法

.class属性取值 子标签名
{
	样式1;
	样式2;
	... ;
}

2.2.2.3 分组选择器

又叫逗号选择器

分组，即切块，分开处理。可同时给多个选择器设置样式。

语法

选择方式1,选择方式2, ... ,选择方式n
{
	样式1;
	样式2;
	... ;
}

2.2.2.4 示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包含选择器</title>
    <style>
        /* 子代选择器 */
        div.list > ul  /* 标签名可以不写 */
        {
            border: 1px solid crimson;
        }  


        /* 后代选择器 */
         div.list li
        {
            border: 1px solid chartreuse;
        } 


        /* 分组选择器 */
        #one,.boss,h1
        {
            border: 2px solid rgb(93, 20, 220);
        }

        
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p id="one">123</p>
    <div class="boss">456</div>
    <div class="list">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </div>
</body>
</html>

2.2.3 属性选择器

2.2.3.1 选中标签中存在的某个值

注：该 “值” 可以是某一个属性。

语法1

.属性值
{
	样式;
}

语法2

.属性值[属性名]
{
	样式;
}

语法3

标签名[属性名]
{
	样式;
}

2.2.3.2 选择确切的属性值

语法1

标签名[属性名="属性取值"]
{
	样式;
}

语法2

[属性名="取值"]
{
	样式;
}

2.2.3.3 选择属性中包含的某个值

语法

标签名[属性名 *= "包含的某一个值"]
{
	样式;
}

2.2.3.4 选择以xx开始的属性值

语法

标签名[属性名 ^= "xx"]
{
	样式;
}

2.2.3.5 选择以xx结尾的属性值

语法

标签名[属性名 $= "xx"]
{
	样式;
}

2.2.3.6 表示下一个标签

语法

.class取值 + 下一个标签名
{
	样式;
}
<!-- 根据class取值，找到包含该值的标签，然后寻找下一个标签 -->
<!-- 注意，两个标签之间不能有其他标签 -->

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        /* 选中某个标签中存在的某个值 */
        .container[class]
        {
            color: blue;
        }

        div[title]
        {
            color: aqua;
        }

        /* 确切等于某个值 */
        input[type=text]
        {
            background: red;
        }

        /* 属性包含某个值 */
        input[type *= "e"]
        {
            background: blue;
        }

        /* 属性中的值以什么开始 */
        input[type ^= "p"]
        {
            background: yellow;
        }

         /* 属性中的值以什么结束 */
         input[type $= "l"]
         {
            background: green;
         }

         /* 表示下一个标签 */
         .msg + p
         {
            color: aqua;
         }

         /* 属性等于某个值 */
         [title="标题"]
         {
            color: brown;
         }

    </style>
</head>
<body>
    <div class="container">一个div容器</div>
    <div title="标题">第二个</div>
    <input type="text" value="1">   
    <input type="password" value="2">
    <input type="url" value="3">
    <div class="msg"></div>
    <p>1</p>

</body>
</html>

2.2.4 伪类选择器

伪类：同一标签在不同状态下有不同样式

表示：通过冒号表示。联系：a标签内的alink、vlink、link属性也可以做出相关的设置

实现：

超链接点击之前 ---- link
超链接被访问之后 --- visited
悬停时 --- hover 使用频率相对高。可以对图片进行旋转，放缩，模糊度的调整等等。
激活时（按住鼠标不松手） --- active
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 超链接点击之前 */
        a:link
        {
            color: red;
        }

        /* 超链接点击之后 */
        a:visited
        {
            color: blue;
        }

        /* 悬停时 */
        a:hover
        {
            color: green;
        }

        /* 激活时 */
        a:active
        {
            color: pink;
        }
    </style>
</head>
<body>
    <a href="demo-3.html">点击</a>
</body>
</html>

注：四者顺序如上代码，是绝对的。

以上内容仅为常用选择器，其他具体选择器可在HTML 系列教程 (w3school.com.cn)查看。

2.2.5 伪元素选择器

与伪类选择器相似，

但是使用两个冒号实现。

具体用法见示例代码

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器</title>
    <style>
        p
        {
            color: red;
        }
        p::before   /* 表示在P标签显示的内容前显示以下内容 */
        {
            content: "A";   /*content 必须有。内容可无，此时可引入图片，音频等其他内容*/
            color: green;
        }
        p::after   /* 表示在P标签显示的内容后显示以下内容 */
        {
            content: "C";   /*注意引号*/
            color: blue;
        }
    </style>
</head>
<body>
    <p>B</p>
</body>
</html>

注：以上内容仅为常用情况，其他具体事项可在HTML 系列教程 (w3school.com.cn)查看。

2.3 css常见样式

2.3.1 css语法

选择器
{
	属性：属性取值;  <!-- 即，样式 -->
}

2.3.2 控制字体样式（常见）

2.3.2.1 设置字体字号(大小)

font-size:取百分比(%)或者em或者像素(px);

2.3.2.1 设置颜色

color:;

2.3.2.3 设置字体

font-family:字体名;

2.3.2.4 设置行高

line-height:取百分比(%)或者em或者像素(px);

2.3.2.5 设置字体粗细

font-weight:取百分比(%)或者em或者像素(px); <!-- 取值可在W3C查看 -->

2.3.2.6 示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制字体样式</title>
    <style>
        p
        {
            font-size: 100px;
            font-family: 'Courier New', Courier, monospace;
            color: red;
            line-height: 0%;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <p>ABC</p>
</body>
</html>

2.3.3 样式特点

继承性 ---- 子元素将继承父元素的样式。
层叠性 ---- 子元素与父元素设置相同样式，子元素会覆盖父元素样式。简单理解：交集部分显示子元素样式。

2.3.4 控制文本

2.3.4.1 text-indent

缩进字符，可取负值，负值表示向左超出边线几个字符。

取值：em

2.3.4.2 text-align

文本对齐方式，默认居左。

取值：

left
center
right

2.3.4.3 text-transform

控制文本大小写。

取值：

none ------ 默认值，按照文本来。
capitalize ------ 将每个单词首字母变大写
uppercase ------ 将每个单词变大写
lowercase ------ 将每个单词变小写

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制文本</title>
    <style>
        p
        {
             text-transform: uppercase; 
            /* text-transform: lowercase; */
            /* text-transform: none; */
            /* text-transform: capitalize; */
            
        }
    </style>
</head>
<body>
    <p>
        china
    </p>
</body>
</html>

2.3.5 导航栏样式

综合以上知识，设置导航栏样式

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        *
        {
            padding: 0;
            margin: 0;
        }
        a
        {
            font-size: 60px;
            font-weight: 300px;
            font-family: 'Courier New', Courier, monospace;
            text-decoration: none;

        }
        ul
        {
            list-style: none;
        }

        .one
        {
            width: 900px;
            height: 65px;
            /* border: 3px solid black; */
            background-image: url();
        }
        .one > ul
        {
            width: 900px;
            height: 65px;
            text-align: center;
        }
        .one > ul >li
        {
            float: left;/*垂直变水平*/
            line-height: 450%;/*控制文本与浏览器上边缘的距离*/
            width: 100px;
            height: 65px;
            
        }
        .one > ul >li:hover
        {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="one"> 
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>            
        </ul>
    </div>
</body>
</html>

静渊谋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS学习小总结

层叠性 ---- 子元素与父元素设置相同样式，子元素会覆盖父元素样式。先单独创建一个css文件，写入样式，然后在head标签内使用link标签引入。如：选择div标签，再赋予样式，那么被div标签修饰的内容就显示该样式。给每个标签设置对应的样式，即作用对象为全体标签，但是优先级最低。capitalize ------ 将每个单词首字母变大写。作用：与样式引入配合使用，通过相应的选择，再赋予样式。uppercase ------ 将每个单词变大写。lowercase ------ 将每个单词变小写。
复制链接

扫一扫