1.css基础+选择器的使用

最新推荐文章于 2024-09-28 15:35:33 发布

sun 马胖

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量228

点赞数

分类专栏： css3 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_66349719/article/details/128226081

版权

css3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

css基础+选择器+CSS样式表

1. html的局限性:

html只关心内容的语义,网页元素,并不用来设置网页的外观.

2. css简介 :

css又被称为级联样式表,css也是一种标记语言 ,css主要设置html中的文本的内容(字体,大小,对其方式),图片的外形(高度,宽度,样式边距等),以及版面的布局和外观样式.

css的语法规范 :

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式

属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分
1.3 CSS 语法规范

<!DOCTYPE html>
<html lang="zh-CN">
<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>体验css的语法规范</title>
    <style>
        /* 选择器 {样式} */
        /* 给谁该样式 {改什么样式} */
     p {
        /* 属性 : 参数; */
        color: red;
        font-size: 28px;
     }
    </style>
</head>
<body>
    <p>有点意思
    </p>
</body>
</html>

css代码风格:

书写样式的格式

展开格式:

h3 { 
    color: pink; 
    font-size: 20px;     
 }

空格规范属性的前面冒号的后面保留一个空格,选择器和大括号中间也要保留空格

3. css选择器:

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

找到所有的 h1 标签。选择器（选对人）。
设置这些标签的样式，比如颜色为红色（做对事）。

css基础选择器 :

基础选择器是用单个选择器构成的,基础选择器又包括:标签选择器,类选择器,ID选择器, 通配符选择器.

标签选择器 :

<!DOCTYPE html>
<html lang="zh-CN">
<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>css基础选择器</title>
   <style>
       p {
           /* 标签选择器 : 写上标签名称 */
           color: greenyellow;
           font-size: 30px;

       }
       div {
           color: pink;
           font-size: 25px;
       }
   </style>
</head>
<!-- --------------------------------------------------------- -->
<body>
   <p>男生</p>
   <p>男生</p>
   <div>女生</div>
   <div>女生</div>
</body>
</html>

标签选择:标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。 缺点是不能差异化设置.

类选择器 :

语法规范 :
. 类名 {
   属性1: 属性值 1;
   ....
}
<标签名称 class="你设定的属性">....<标签名称>
<!DOCTYPE html>
<html lang="zh-CN">
<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>css类选择器</title>
</head>
<style>
   .red {
       color: red
   }
</style>
<body>
   <ul>
       <li class="red">001</li>
       <li>002</li>
       <li>003</li>
   </ul>
</body>
</html>

类选择器的口诀:样式点定义,结构类调用,一个或多个,开发最常用

4. css画盒子: background-color设置背景颜色

<!DOCTYPE html>
<html lang="zh-CN">
<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>css画盒子</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            /* 背景颜色 background-color*/
            background-color: green;

         }
    </style>
</head>
<!-- --------------------------------------------------------- -->
<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>
</html>

5. css类选择器多类名:

创键多个类名 : 使用时在一个class里用空格隔开.

  <div class="red font35">梓不悦</div>

6. id调用标签:

格式:

<!DOCTYPE html>
<html lang="zh-CN">
<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>
   #pink {
    color: pink;
   }
    </style>
</head>
<body>
<div id="pink">孙梓荃</div>
</body>
</html>

id选择器的口诀: 样式#定义,结构id调用,只能调用一次,别人勿使用

id选择器和类选择器的区别 :

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

7.统配符选择器:

通配符选择器不需要调用就可以给所有的元素使用样式
通配符选择器有着特殊的使用场景

* {
属性1:属性值;
....
}

css基础选择器的总结:

在这里插入图片描述

修改样式类选择器用的最多

5.css的四种样式表:

内部样式表: 把css些到html内部,单独放在<style>-</ style>标签中
行内样式表:是在元素内部style属性中设定css样式 (适用于简单的样式修改)
```
<div style=" " >--</div>
```
外部样式表:单独写一个css文件然后使用标签 link标签写到head标签上方:
```
<link rel="stylensheet" href="文件路径">
```
导入样式：
```
@import url("路径");
```

-</ style>标签中

行内样式表:是在元素内部style属性中设定css样式 (适用于简单的样式修改)
```
<div style=" " >--</div>
```
外部样式表:单独写一个css文件然后使用<link>标签 link标签写到head标签上方:
```
<link rel="stylensheet" href="文件路径">
```
导入样式：
```
@import url("路径");
```