Web前端 CSS入门

最新推荐文章于 2023-03-12 13:11:32 发布

内蒙金刚狼

最新推荐文章于 2023-03-12 13:11:32 发布

阅读量151

点赞数

分类专栏： Web开发

本文链接：https://blog.csdn.net/return_2/article/details/114259263

版权

Web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这里写目录标题

CSS介绍
css语法规则
CSS和HTML的结合方式
CSS中渲染标签的几种选择器
CSS的常用样式

CSS介绍

概念：用于控制网页样式并允许将样式信息与网页分离的一种标记性语言。

css语法规则

选择器{
属性key ：值value；
}
选择器：浏览器根据‘选择器’决定受CSS样式影响的HTML标签
属性：想要改变的样式名，并且每个属性都有一个值。一般每行只描述一个属性
多个声明：如果要定义不止一个声明，则需要用分号将声明分开
注释：/ * 注释 * /

CSS和HTML的结合方式

第一种：在标签的style属性上设置

格式：‘style=key:value value’

需求：修改div标签的样式，边框一个像素，实线，红色。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>CSS入门</title>
</head>
<body>
    <div style="border: 1px solid red">标签1</div>
    <div style="border: 1px solid red">标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

在这里插入图片描述

缺点：
1.代码会非常长

第二种：在head标签中，使用style标签来定义css样式

格式：
	选择器{
		属性key ：值value；
		}

需求：修改div，span标签的样式，边框一个像素，实线，红色。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>CSS入门</title>
<!--    在标签内是css语言-->
    <style type="text/css">
        /*在这里写注释要用css注释*/
        div{
            border:1px solid red
            }
        span{
        border:1px solid red
        }
    </style>
</head>
<body>
    <div>标签1</div>
    <div>标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

效果：
在这里插入图片描述

第三种：把css样式写成单独的css文件，用link标签引入

在head标签中，使用html的 < link rel=‘stylesheet’ type=‘text/css’ href=’./styles.css’ >

css文件：

div{
border:1px solid red
}

span{
border:1px solid red
}

html文件：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>CSS入门</title>
    <link rel="stylesheet" href="1.css" type="text/css"/>
</head>
<body>
    <div>标签1</div>
    <div>标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

效果：
在这里插入图片描述

CSS中渲染标签的几种选择器

标签名选择器 – 同种标签渲染

格式：
	标签名{
		属性：值
		  }
使用：
在head标签中设置style标签

标签名选择器：可以决定那些标签被动的使用这个样式
需求：在所有div标签上所有字体为蓝色，字体大小30像素边框为1像素黄色实线
所有span标签的字体为红色，字体大小20像素，边框为5像素蓝色实现

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>CSS入门</title>
    <style type="text/css">
        div{
        border:1px solid yellow;
        color:blue
        font-size:30px
        }
        span{
        border:5px solid blue;
        color:red;
        font-size:50px
        }
    </style>
</head>
<body>
    <div>标签1</div>
    <div>标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

效果：
在这里插入图片描述

id选择器 – 单标签渲染

格式：
	#id 属性值{
			属性：值
			  }
使用：只需要在需要渲染的标签上设置id属性。
id选择器是针对某一个标签所设计的格式。只能对应一个标签。

需求：定义两个div
id为001的div：修改其字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线
id为002的div：修改其字体颜色为红色，字体大小20像素，边框为5像素蓝色实线

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>CSS入门</title>
    <style type="text/css">
        #id001{
        color:blue;
        font_size:30px;
        border:1px solid red
        }
        #id002{
        color:red;
        font_size:20px;
        border:5px solid blue
        }

    </style>
</head>
<body>
    <div id="id001">标签1</div>
    <div id="id002">标签2</div>
</body>
</html>

在这里插入图片描述

类型选择器 – 类型标签渲染

格式：
	.class属性值{
				属性：值
				}
class选择器可以通过class属性有效的选择性的去使用这个样式
class选择器是针对一种类型设置的格式，多个标签可选。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>CSS入门</title>
    <style type="text/css">
        .class01{
        color:blue;
        font-size:30px;
        border:1px solid red
        }
        .class02{
        color:pink;
        font-size:20px;
        border:1px solid red
        }

    </style>
</head>
<body>
    <div class="class01">标签1</div>
    <div class="class02">标签2</div>
</html>

在这里插入图片描述

组合选择器

格式：
	选择器1，选择器2，.。。。。选择器n{
					属性：值
					}
可以让多个选择器公用同一个代码。

需求：修改class=‘class01’ 的div标签和id’id00‘所有的span标签，字体为蓝色，字体大小20个像素，边框为黄色实线。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>CSS入门</title>
    <style type="text/css">
        .class01,#id001{
        color:blue;
        font-size:20px;
        border:1px solid yellow
        }
    </style>
</head>
<body>
<div id="id001">标签1</div>
<span class="class01">标签2</span>
</body>
</html>

在这里插入图片描述

CSS的常用样式

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>CSS入门</title>
    <style type="text/css">
        div{
        color:blue;
        border:1px red solid;
        width:200px;
        height:200px;
        background-color:green;/*背景颜色*/
        font-size:30px;
        margin-left:auto;/*div居中，即边框剧中*/
        margin-right:auto;
        text-align:center;/*文本居中*/
        }
        a{
        text-decoration:none;/*超链接去下划线*/
        }
        table{
        border:1px red solid;/*表格细线*/
        border-collapse:collapse;/*合并单元细线和表格细线*/
        }
        td{
        border:1px red solid/*单元格细线*/
        }
        ul{
        list-style:none;/*消除无序列表前的符号*/
        }
    </style>
</head>
<body>
    <!--    表格细线-->
    <table border="2">
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>

        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>

        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>
    <hr/>
    <a href="http://www.baidu.com">百度</a>
    <div>这是一个div标签</div>
    <!--    无序列表-->
    <ul>
        <li>赵四</li>
        <li>刘能</li>
        <li>宋小宝</li>
        <li>渣渣辉</li>
    </ul>
</body>
</html>

内蒙金刚狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端 CSS入门

这里写目录标题CSS介绍css语法规则CSS和HTML的结合方式第一种：在标签的style属性上设置第二种：在head标签中，使用style标签来定义css样式第三种：把css样式写成单独的css文件，用link标签引入标签名选择器id选择器类型选择器CSS介绍概念：用于控制网页样式并允许将样式信息与网页分离的一种标记性语言。css语法规则选择器{属性key ：值value；}选择器：浏览器根据‘选择器’决定受CSS样式影响的HTML标签属性：想要改变的样式名，并且每个属性都有一个值。一般每
复制链接

扫一扫