CSS[基本语法、选择器以及常用元素属性讲解]

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

dhdhdhdhg

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

阅读量473

点赞数 3

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/m0_51405559/article/details/122459984

版权

web 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

一、CSS是什么

CSS全称为Cascading Style Sheets，是层叠样式表。
CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。类似于女孩子平时的化妆。

二、基本语法规范

选择器+{一条/N条声明}
在这里插入图片描述

选择器决定针对谁修改（找谁）
声明决定修改啥（干啥）
声明的属性是键值对，使用；区分键值对，使用：区分键和值

<style>
    p {
        /* 设置字体颜色*/
        color: red;
        font-size: 30px;
        /*设置字体大小*/
    }
</style>

<p>hello</p>

展示结果：
在这里插入图片描述
注意：

1.CSS要写到style标签中（后面可能还会介绍其他写法）
2.style标签可以放到页面任意位置，一般放到head标签内
3.CSS使用/* */作为注释（使用ctrl+/快速切换）

三、引入方式

1.内部样式表

style标签：html文件中，定义< style >
理论上来说，style放到html的哪里都行，但是一般都是放到head标签中。
优点： 这样做能够让样式和页面结构分离
缺点： 分离的还不够彻底，尤其是css内容多的时候

2.行内样式表

通过style属性，来指定某个标签的样式
html的标签元素中，定义style属性：如< p style="…" >
只适合于写简单样式，只针对某个标签生效
缺点： 不能写太复杂的样式
这种写法优先级较高，会覆盖其他的样式

<style>
    div {
        color: red;
    }
</style>
<div style="color:green">绿色好看</div>

展示结果：
在这里插入图片描述
可以看出这种方式优先级更高，因为这里的绿色把红色覆盖了。

3.外部样式

实际开发中最常用的方式
1.创建一个css文件
2.使用link标签引入css

< link rel=“stylesheet” href=“css文件路径” >

首先创建demo.html

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>大耳朵图图真好看</div>
</body>
</html>

然后创建style.css

div {
    color: red;
}

展示结果：
在这里插入图片描述
注意：不要忘记link标签调用css，否则不生效
优点： 样式和结构彻底分离了
缺点： 受到浏览器缓存影响，修改之后不一定立即生效

关于浏览器缓存：
这是计算机一种常见的提升性能的技术手段
网页访问一些静态的资源（内容不会变化的文件如：html/CSS/JS文件等）通常是从服务器上获取的，如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取，就可以使用缓存先存起来（就是存在本地硬盘上了），下次访问时，发现访问的内容是不变的，就直接从本地获取，从而提高访问效率
可以通过ctrl+F5强制刷新页面（或者按住ctrl，鼠标点击页面的刷新按钮），强制浏览器重新获取css文件

四、代码风格

1.样式格式

1.紧凑风格

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

2.展开风格

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

2.样式大小写

虽然CSS不区分大小写，我们开发时统一使用小写字母

3.空格规范

冒号后面带空格
选择器和{ 之间也有一个空格

五、选择器

1.选择器的功能

选中页面中指定的标签元素

要先选中元素，才能设置元素的属性

2.选择器的种类

以下内容只是CSS2标准中支持的选择器，CSS3中还做了一些补充后面会提到。

1.基础选择器： 单个选择器构成的

标签选择器
类选择器
id选择器
通配符选择器

2.复合选择器： 把多种基础选择器综合运用起来

后代选择器
子选择器
并集选择器
伪类选择器

3.基础选择器

1.标签选择器
选择器指定的所有标签，都按照选择器设置的样式。

特点：
能快速将同一类型的标签都选择出来
但是不能差异化选择

<!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>Document</title>
    <style>
        p {
            color: red;
        }
        div {
            color: green;
        }
    </style>
</head>
<body>
    <p>图图</p>
    <p>图图</p>
    <p>图图</p>
    <div>小美</div>
    <div>小美</div>
    <div>小美</div>
</body>
</html>

展示结果：
在这里插入图片描述

2.类选择器
标签可以设置多个class类，中间空格间隔
一个class类，可以使用在多个标签中
类选择器：.+类名
特点：

差异化表示不同的标签
可以让多个标签都使用同一个标签

<style>
    .blue {
        color: blue;
    }
</style>

<div class="blue">图图</div>
<div>图图</div>

展示结果：
在这里插入图片描述
语法细节：

1.类名用.开头的
2.下方的标签使用class属性来调用
3.一个类可以被多个标签使用，一个标签也能使用多个类（多个类名要是用空格分隔，这种做法可以让代码更好复用）
4.如果是长的类名，可以使用-分割
5.不要使用纯数字，或者中文，以及标签名来命名类名

代码示例：使用多个类名
注意：一个标签可以同时使用多个类名
这样做可以把相同的属性提取出来，达到简化代码的效果

<style>
    .red {
        color: red;
    }
    .size22 {
        font-size: 22px;
    }
</style>

<p class="red size22">这是一段想看到的红色字体</p>
<p class="size22">这是不想设置为红色的内容</p>
<p class="red size22">这是一段想看到的红色字体</p>
<p>这是不想设置为红色的内容</p>
<p class="red size22">这是一段想看到的红色字体</p>

展示结果：
在这里插入图片描述
3.id选择器
和类选择器类似

CSS中使用#开头表示id选择器
id选择器的值和html中某个元素的id值相同
html的元素id不必带#
id是唯一的，不能被多个标签使用（是和类选择器最大的区别）

<style>
    #p2 {
       color: red;
    }
</style>

<p>11111111</p>
<p id="p2">22222222</p>
<p>33333333</p>

展示结果：
在这里插入图片描述
类比：
姓名是类选择器，可以重复
身份证号码是id选择器，是唯一的

4.通配符选择器
使用*的定义，选取所有的标签

<style>
    * {
      color: red;
    }
</style>

<h2>h2标题</h2>
<h3>h3标题</h3>
<p>1111</p>
<p>2222</p>

展示结果：
在这里插入图片描述
页面的所有内容都会被改成红色
不需要被页面结构调用
基础选择器小结：

4.复合选择器

1.后代选择器
又叫包含选择器，选择某个父元素中的某个子元素

元素1 元素2 {样式声明}

元素1和元素2要是用空格分割
元素1是父级，元素2是子级，只选元素2，不影响元素1

代码示例：把ol中的li修改颜色，不影响ul
在这里插入图片描述
展示结果：

代码示例：元素2不一定非是儿子，也可能是孙子

展示结果：

代码示例：可以是任意基础选择器的组合（包括类选择器，id选择器）

<style>
    .one li a {
        color: green;
    }
</style>

<ol class="one">
    <li>ddd</li>
    <li>eee</li>
    <li><a href="#">fff</a></li>
    <li><a href="#">fff</a></li>
    <li><a href="#">fff</a></li>
</ol>

展示结果：
在这里插入图片描述
2.子选择器
和后代选择器类似，但是只能选择子标签

元素1>元素2 { 样式声明 }

使用大于号分割
只选亲儿子，不选孙子元素

在这里插入图片描述

展示结果：
在这里插入图片描述
3.并集选择器
用于选择多组标签（集体声明）

元素1，元素2 { 样式声明 }

通过逗号分割多个元素
表示同时选中元素1和元素2
任何基础选择器都可以使用并集选择器
并集选择器建议竖着写，每个选择器占一行（最后一个选择器不能加逗号）

<style>
    /* 把所有一起改成红色*/
    div,
    h3,
    ul>li {
        color: red;
    }
</style>

<div>苹果</div>
<h3>香蕉</h3>
<ul>
    <li>橘子</li>
    <li>橙子</li>
</ul>

展示结果：
在这里插入图片描述
4.伪类选择器
（1）链接伪类选择器

a:link 选择未能访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接（鼠标按下了但是未弹起）

<style>
    /* 链接未访问时的样式 */
    a:link {
        color: black;
        /* 去掉a标签的下划线 */
        text-decoration: none;
    }
    /* 链接访问后的样式 */
    a:visited {
        color: green;
    }
    /*链接在鼠标移动到上边时的样式 */
    a:hover {
        color: red;
    }
    /* 链接在鼠标点击下去但没有放开时的样式 */
    a:active {
        color: blue;
    }
</style>

<a href="#">小猫</a>

如何让一个已经被访问过的链接恢复成未访问的状态？
清空浏览器历史记录即可，ctrl+shift+delete
注意事项：
1.按照LVHA的顺序书写，例如把active拿到前面去，就会导致active失效，记忆规则“绿化”
2.浏览器的a标签都有默认样式，一般实际开发都需要单独制定样式
3.实际开发主要给链接做一个样式，然后给hover做一个样式即可，link、visited、active用的不多
（2）force伪类选择器
选取焦点的input表单元素设置样式，失去焦点后，会还原为原有的样式

<style>
    div>input:focus {
        color: red;
    }
</style>

<div>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</div>

展示结果：
在这里插入图片描述
复合选择器小结：

六、常用元素属性

1.字体属性

1.设置字体

1.字体名称可以用中文，但是不建议
2.多个字体之间使用逗号分隔（从左到右查找字体，如果都找不到，会使用默认字体）
3.如果字体名有空格，使用引号包裹
4.建议使用常用字体，否则兼容性不好

<style>
    .font-family .one {
        font-family: 'Microsoft YaHei';
    }
    .font-family .two {
        font-family: '宋体';
    }
</style>

<div class="font-family">
    <div class="one">
        微软雅黑
    </div>
    <div class="two">
        宋体
    </div>
</div>

展示结果：
在这里插入图片描述
2.大小

p {
    font-size: 20px;
}

不同的浏览器默认字号不一样，最好给一个明确值（chrome默认是16px）
可以给body标签使用font-size
要注意单位px不要忘记
标题标签需要单独指定大小

注意： 实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮

<style>
    .font-size .one {
        font-size: 40px;
    }

    .font-size .two {
        font-size: 20px;
    }
</style>

<div class="font-size">
    <div class="one">
        大大大
    </div>
    <div class="two">
        小小小
    </div>
</div>

展示结果：
在这里插入图片描述
3.粗细

p {
    font-weight: bold;
    font-weight: 700;
}

可以使用数字表示粗细
700==bold，400是不变粗 ==normal
取值范围是100~900

<style>
    .font-weight .one {
        font-weight: 900;
    }
    .font-weight .two {
        font-weight: 100;
    }
</style>

<div class="font-weight">
    <div class="one">
        粗粗粗
    </div>
    <div class="two">
        细细细
    </div>
</div>

展示结果：
在这里插入图片描述
4.文字样式

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

很少把某个文字变倾斜
但是经常要把em/i改成不倾斜

<style>
    .font-style em {
        font-style: normal;
    }
    .font-style div {
        font-style: italic;
    }
</style>

<div class="font-style">
    <em>
        解封啦
    </em>
    <div class="one">
        要放假啦
    </div>
</div>

展示结果：
在这里插入图片描述

2.文本属性

1.文本颜色
认识RGB
我们的显示器是有很多很多的“像素”构成的，每个像素视为一个点，这个点就能反应出一个具体的颜色
我们使用R（red）、G（green）、B（blue）的方式表示颜色（色光三原色），三种颜色按照不同的比例搭配，就能混合出各种五彩斑斓的效果
计算机中针对R，G，B三个分量，分别使用一个字节表示（8个比特位，表示的范围是0-255，十六进制表示为00-FF）
数值越大，表示该分量的颜色就越浓，255，255，255就表示白色；0，0，0就表示黑色
设置文本颜色

color: red;
color: #ff0000;
color: rgb(255,0,0);

鼠标悬停在vscode的颜色上，会出现颜色选择器，可以手动调整颜色
color属性值的写法：

预定义的颜色值（直接是单词）
[最常用]十六进制形式
RGB方式

<style>
    .color {
          /* 字体颜色 */
          /* color: red; */
          /* color: #FF0000; */
          color: rgb(255,0,0);
    }
</style>

<div class="color">这是一段话</div>

展示结果：
在这里插入图片描述
2.文本对齐
控制文字水平方向的对齐

不光能控制文本对齐，也能控制图片等元素居中或者靠右

text-align: [值];

center：居中对齐
left：左对齐
right：右对齐

<style>
    .text-align .one {
        text-align: left;
    }

    .text-align .two {
        text-align: right;
    }

    .text-align .three {
         text-align: center;
    }
</style>

<div class="text-align">
    <div class="one">左对齐</div>
    <div class="two">右对齐</div>
    <div class="three">居中对齐</div>
</div>

展示结果：
在这里插入图片描述
3.文本装饰

text-decoration: [值];

常用取值：

underline下划线。[常用]
none 啥都没有，可以给a标签去掉下划线
overline 上划线。[不常用]
line-through 删除线。[不常用]

<style>
    .text-decorate .one {
        text-decoration: none;
    }

    .text-decorate .two {
        text-decoration: underline;
    }

    .text-decorate .three {
        text-decoration: overline;
    }

    .text-decorate .four {
        text-decoration: line-through;
    }
</style>

<div class="text-decorate">
    <div class="one">啥都没有</div>
    <div class="two">下划线</div>
    <div class="three">上划线</div>
    <div class="four">删除线</div>
</div>

展示结果：
在这里插入图片描述
例如B站这里的导航链接，就是使用这个属性去掉的下划线（可以F12观察）

4.文本缩进
控制段落的首行缩进（其他行不影响）

text-indent: [值];

单位可以使用px或者em
使用em作为单位更好，1个em就是当前元素的文字大小
缩进可以是负的，表示向左缩进（会导致文字就冒出去了）

<style>
    .text-indent .one {
        text-indent: 2em;
    }

    .text-indent .two {
        text-indent: -2em;
    }
</style>
<div class="text-indent">
    <div class="one">正常缩进</div>
    <div class="two">反向缩进</div>
</div>

展示结果：
在这里插入图片描述
5.行高
行高指的是上下文本行之间的基线距离

HTML中展示文字涉及到这几个基准线：

顶线
中线
基线（相当于英语四线格的倒数第二条线）
底线

内容区：
底线和顶线包裹的区域，即下图浅紫色背景区域
在这里插入图片描述
其中基线之间的距离=顶线间距离=底线间距离=中线间距离

line-height: [值];

注意1： 行高=上边距+下边距+字体大小
上下边距是相等的，此处字体大小是16px，行高40px，上下边距就分别是12px

<style>
    .line-height .one {
        line-height: 40px;
        font-size: 16px;
    }
</style>

<div class="line-height">
    <div>
        上一行
    </div>
    <div class="one">
        中间行
    </div>
    <div>
        下一行
    </div>
</div>

展示结果：
在这里插入图片描述
注意2： 行高也可以取normal等值
这个取决于浏览器的实现，chrome上normal为21px
注意3： 行高等于元素高度，就可以实现文字居中对齐

<style>
    .line-height .two {
        height: 100px;
        line-height: 100px;
    }
</style>

<div class="line-height">
    <div class="two">
        文本垂直居中
    </div>
</div>

展示结果：
在这里插入图片描述

3.背景属性

1.背景颜色

background-color：[指定颜色]

默认是transparent（透明）的，可以通过设置颜色的方式修改

<style>
    body {
        background-color: #f3f3f3;
    }

    .bgc .one {
        background-color: red;
    }

    .bgc .two {
        background-color: #0f0;
    }
</style>

<div class="bgc">
    <div class="one">红色背景</div>
    <div class="two">绿色背景</div>
    <div class="three">透明背景</div>
</div>

展示结果：
在这里插入图片描述
2.背景图片

background-image: url(...);

比image更方便控制位置（图片在盒子中的位置）
注意：

1.url不要遗漏
2.url可以是绝对路径，也可以是相对路径
3.url可以加引号，也可以不加

<style>
    .bgi .one {
        background-image: url(cui.jpg);
        height: 600px;
    }
</style>

<div class="bgi">
    <div class="one">背景图片</div>
</div>

展示结果：
在这里插入图片描述
3.背景平铺

background-repeat: [平铺方式]

重要取值：

repeat：平铺
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺

默认是repeat

背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方

<style>
    .bgr .one {
        background-image: url(rose.jpg);
        height: 300px;
        background-repeat: no-repeat;
    }

    .bgr .two {
        background-image: url(rose.jpg);
        height: 300px;
        background-repeat: repeat-x;
    }

    .bgr .three {
        background-image: url(rose.jpg);
        height: 300px;
        background-repeat: repeat-y;
    }
</style>

<div class="bgr">
    <div class="one">不平铺</div>
    <div class="two">水平平铺</div>
    <div class="three">垂直平铺</div>
</div>

展示结果：
在这里插入图片描述
4.背景位置

background-position: x y;

修改图片的位置
参数有三种风格：

1.方位名词：(top,left,right,bottom)
2.精确单位：坐标或者百分比（以左上角为原点）
3.混合单位：同时包含方位名词和精确单位

<style>
    .bgp .one {
        background-image: url(rose.jpg);
        height: 500px;
        background-repeat: no-repeat;
        background-color: purple;

        background-position: center;
    }
</style>

<div class="bgp">
    <div class="one">背景居中</div>
</div>

展示结果：
在这里插入图片描述
注意：

1.如果参数的两个值都是方位名词，则先后顺序无关（top left和left top 等效）
2.如果只指定了一个方位名词，则第二个默认居中（left则意味着水平居中，top意味着垂直居中）
3.如果参数是精确值，则第一个肯定是x，第二个肯定是y，（100 200意味着x为100，y为200）
4.如果参数是精确值，且只给了一个数值，则该数值一定是x坐标，另一个默认垂直居中
5.如果参数是混合单位，则第一个值一定为x，第二个值为y坐标（100 center表示横坐标为100，垂直居中）

关于坐标系：
计算机中的平面坐标系，一般是左手坐标系（和数学中常用的右手系不一样，y轴是往下指的）
在这里插入图片描述
5.背景尺寸

background-size: length|percentage|cover|contain;

1.可以填具体的数值：如 40px 60px 表示宽度为40px，高度为60px
2.也可以填百分比：按照父元素的尺寸设置
3.cover：把背景图片扩展至足够大，以使背景图片完全覆盖背景区域，背景图片的某些部分也许无法显示在背景定位区域中
4.把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

在这里插入图片描述

注意体会contain和cover的区别，当元素为矩形（不是正方形）时，区别是很明显的
上图是contain
cover：

4.圆角矩形

通过border-radius使边框带圆角效果
1.基本用法

border-radius: length;

length是内切圆的半径，数值越大，弧线越强烈

<style>
    div {
       width: 200px;
       height: 100px;
       border: 2px solid red;
       border-radius: 10px;
    }
</style>

<div>哈哈</div>

展示结果：
在这里插入图片描述
2.生成圆形
让border-radius的值为正方形宽度的一半即可

<style>
    div {
       width: 200px;
       height: 200px;
       border: 2px solid red;
       border-radius: 100px;
       /* 或者用50%表示宽度的一半 */
            border-radius: 50%;
        }
    </style>
</head>
<body>
     <div></div>

展示结果：
在这里插入图片描述

3.生成圆角矩阵
让border-radius的值为矩形高度的一半即可

<style>
    div {
       width: 200px;
       height: 100px;
       border: 2px solid red;
       border-radius: 50px;
    }
</style>

    <div></div>

展示结果：
在这里插入图片描述
4.展开写法
border-radius是一个复合写法，实际上可以针对四个角分别设置

border-radius: 2em;

等价于

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 10px 20px 30px 40px;

等价于（按照顺时针排列）

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

dhdhdhdhg

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS[基本语法、选择器以及常用元素属性讲解]

一、CSS是什
复制链接

扫一扫

专栏目录

CSS[基本语法、选择器以及常用元素属性讲解]

文章目录

一、CSS是什么

二、基本语法规范

三、引入方式

1.内部样式表

2.行内样式表

3.外部样式

四、代码风格

1.样式格式

2.样式大小写

3.空格规范

五、选择器

1.选择器的功能

2.选择器的种类

3.基础选择器

4.复合选择器

六、常用元素属性

1.字体属性

2.文本属性

3.背景属性

4.圆角矩形