css知识总汇

2024-02-05 11:14:22

css简介

css是层叠样式表单，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

css知识总汇

 

 选择器：浏览器根据“选择器”决定收css样式影响的html元素（标签）

属性（property）：是你要改变的样式名，并且每个属性都有一个值，属性和值被冒号分开，并由花括号包围，这样就组成了一完整的样式声明（declaration），例如：p{color:blue}

多个声明：如果要定义不止一个声明，则需要使用分好将每个声明分开，虽然最后一条声明可以不加分号（但尽量在每一条声明末尾都加上分号）

例如：

　　

p{
    color: red;
    font-size: 30px;
}

 

注意：一般每行只描述一个属性

css注释：

 

/* 注释内容 */

 

CSS和HTML的结合方式

第一种

在标签的style属性上设置“key:value value;”，修改标签样式

需求1：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1像素，实现，红色

<body>
    <div style="border: 1px solid red;">div标签1</div>
    <div style="border: 1px solid red;">div标签2</div>
    <span style="border: 1px solid red;">span标签1</span>
    <span style="border: 1px solid red;">span标签2</span>
</body>

 这种方式的缺点？

　　1、如果标签多了，样式多了，代码量非常庞大

　　2、可读性非常差

　　3、css代码没什么复用性可言

第二种

在head标签中，使用style标签来定义各种自己需要的css样式

格式如下：

　　xxx{

　　　　Key:value value;

　　}

需求1：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1像素，实现，红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

这种方式的缺点：

　　1、只能在同一页面内复用代码，不能在多个页面中复用css代码

　　2、维护起来不方便，实际项目中会有成千上万的页面，要到每个页面中去修改，工作量太大了

第三种方式

把css样式写成一个单独的css文件，再通过link标签引入即可复用

在html中引入css样式文件格式

   <link rel="stylesheet" href="../css/a.css">

href属性的值是css样式文件的路径

css文件内容

div{
     border: 1px solid red;
}
span{
     border: 1px solid red;
}

html文件代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/a.css">
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>

<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

css选择器

标签选择器

标签选择器的格式是：

　　标签名{

　　　　属性：值;

　　}

标签名选择器，可以决定哪些标签被动的使用这个样式

需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线，并且修改所有span标签的字体颜色为黄色，字条大小20个像素，边框为5像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        span{
            border: 5px dashed blue;
            color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>

<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

id选择器

id选择器的格式是：

　　#id属性值{

　　　　属性：值;

　　}

id选择器可以让我们通过id属性选择性的去使用这个样式

需求1：分别定义两个div标签，第一个div表定义为id001，然后根据id属性定义css样式修改字体颜色为蓝色，字体大小30像素，边框为1黄色实线。第二个div标签定义id为id002，然后根据id属性定义css样式，修改字体颜色为红色，字体大小20个像素，边框为5像素蓝色点线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id001{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        #id002{
            border: 5px dotted blue;
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>

class选择器（类选择器）

类选择器的格式：

　　.class属性值{

　　　　属性：值;

　　}

类选择器，可以通过class属性有效的选择性去使用这个样式

需求 1：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。

需求 2：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .class01{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        .class02{
            border: 1px solid red;
            color: gray;
            font-size: 26px;
        }
    </style>
</head>
<body>
<div class="class02">div标签1</div>
<div class="class02">div标签1</div>
<div class="class01">div标签2</div>
<div class="class01">div标签2</div>
</body>
</html>

组合选择器

组合选择器的格式是：

　　选择器1,选择器2,选择器n{

　　　　属性：值;

　　}

组合选择器可以让多个选择器公用同一个css样式代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .class01,#id01{
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>
<div id="id01">div标签class01</div>
<span>span标签</span>
<div class="class01">div标签</div>
<div>div标签</div>
</body>
</html>

常用样式

字体颜色

color: red;

颜色可以写颜色名如black，blue，red，green等

颜色也可以写成rgb和十六进制值表示：如rgb(255,0,0),#00F6DE，如果写十六进制必须加#

宽度

width:19px;

宽度可以写像素值：19px;

也可以写百分比值：20%

高度

height:20px;

高度可以写像素值：19px;

也可以写百分比值：20%;

背景颜色

background-color:#0F2D4C

字体样式：

color：#FF0000；字体颜色红色

font-size：20px; 字体大小

红色1像素实现边框：

border：1px solid red

div居中：

text-align: center

超链接去下划线：

text-decoration: none

表格细线：

table {

　　 border: 1px solid black; /*设置边框*/

　　border-collapse: collapse; /*将边框合并*/

}

td,th {

　　border: 1px solid black; /*设置边框*/

}

列表去除修饰

ul {

　　list-style: none;

}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
            border: 1px yellow solid;
            width: 300px;
            height: 300px;
            background-color: green;
            font-size: 30px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        table{
            border: 1px red solid;
            border-collapse: collapse;
        }
        td{
            border: 1px red solid;
        }
        a{
            text-decoration: none;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>
<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
</table>
<a href="http://www.baidu.com">百度</a>
<div>我是div标签</div>
</body>
</html>

 

上一篇：2021-10-26记录


下一篇：HTML CSS