06_css

激进的猴哥

已于 2024-03-24 15:33:32 修改

阅读量488

点赞数 18

文章标签： css 前端

于 2024-03-24 15:33:15 首次发布

本文链接：https://blog.csdn.net/hcb20010421/article/details/136987654

版权

一、css的语法

二、在HTML中如何使用css样式（html中嵌入css的方式）

2、class类选择符 (使用点.将自定义名（类名）来定义的选择符)（类选择器P）

一、css的语法

什么是css？

层叠样式表
命名规则：

使用字母、数字或下划线和减号构成，不要以数字开头
格式：

选择器{属性:值;属性:值;属性:值;....}

其中选择器也叫选择符
CSS中注释
```
/* ... */
```

二、在HTML中如何使用css样式（html中嵌入css的方式）

1、内联方式（行内样式）

就是在HTML的标签中使用style属性来设置css样式格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>

特点：仅作用于本标签

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
</body>
</html>

效果：

2、内部方式（内嵌样式）

就是在head标签中使用<style type="text/css">....</style>标签来设置css样式格式：

 <style type="text/css">
    ....css样式代码
 </style>

特点：作用于当前整个页面

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="test.css">-->
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
       
    </style>
</head>
<body>
<div style="border: 3px solid yellow"> </div>

</body>
</html>

效果：

3、外部导入方式（外部链入）

（推荐）就是在head标签中使用<link/>标签导入一个css文件，在作用于本页面，实现css样式设置

格式：
```
<link href="文件名.css" type="text/css" rel="stylesheet"/>
```
特点：作用于整个网站
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="test.css">

</head>
<body>
<div style="border: 100px solid yellow"> </div>

</body>
</html>

 div{
     border-radius: 100px;
 }

结果：

三、**css2的选择符：

1、html选择符（标签选择器）

就是把html标签作为选择符使用

如 p{....} 网页中所有p标签采用此样式

h2{....}  网页中所有h2标签采用此样式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="test.css">
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

    </style>
</head>
<body>
<div style="border: 3px solid yellow"> </div>
<div style="border: 3px solid yellow"> </div>
<div style="border: 3px solid yellow"> </div>


</body>
</html>

效果：

2、class类选择符 (使用点.将自定义名（类名）来定义的选择符)（类选择器P）

定义： .类名{样式....} 匿名类

其他选择符名.类名{样式....} 使用：

<html标签 class="类名">...</html标签>

.mc{color:blue;}   /* 凡是class属性值为mc的都采用此样式 */

注意：类选择符可以在网页中重复使用

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="test.css">-->
    <style>
       /*class选择器   所有标签的class属性值为div1的标签都会采用此样式 */
        .div1{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

    </style>
</head>
<body>
<div class="div1" style="border: 3px solid yellow"> </div>
<div class="div1" style="border: 8px solid red"> </div>



</body>
</html>

效果：

3、Id选择符(ID选择器)

定义： #id名{样式.....}

使用：<html标签 id="id名">...</html标签>

注意：id选择符只在网页中使用一次

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="test.css">-->
    <style>
       /*class选择器   所有标签的class属性值为div1的标签都会采用此样式 */
        #div1{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

    </style>
</head>
<body>

<div id="div1" style="border: 8px solid red"> </div>



</body>
</html>

效果：

4、关联选择符（包含选择符）

格式：选择符1 选择符2 选择符3 ...{样式....}

例如： table a{....} /*table标签里的a标签才采用此样式*/

h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/

5、组合选择符（选择符组）

格式：选择符1,选择符2,选择符3 ...{样式....}

h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*只给ul内的li采用样式*/
        /*ul li*/
        /*组合选择器 多个选择器采用同一个样式*/
        ul li,ol li{
            height: 30px;
            border-bottom: 1px dotted red;
        }
    </style>
</head>
<body>
<ul>
    <li>ul内的li</li>
    <li>ul内的li</li>
    <li>ul内的li</li>
    <li>ul内的li</li>
    <li>ul内的li</li>

</ul>
<ol>
    <li>ol内的li</li>
    <li>ol内的li</li>
    <li>ol内的li</li>
    <li>ol内的li</li>
    <li>ol内的li</li>
</ol>
</body>
</html>

效果：