week3--CSS基础盒子模型选择器

原创已于 2023-01-17 23:38:56 修改 · 915 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2022-04-14 14:27:02 首次发布

本文详细介绍了CSS的基础知识，包括其作为样式表的作用、样式引用方式，如内嵌、外联和行内样式。接着深入探讨了选择器的各种类型，如标签、类、ID、通配符、后代、子代、并集和交集选择器，以及伪类选择器的应用。此外，还讲解了CSS中的盒子模型，包括内容、边框、内边距和外边距的概念和调整方法。文章最后总结了通过学习CSS如何提升网页美化能力。

CSS基础 && 盒子模型 && 选择器

写在前面

恍惚之间已经是第三次写博客了

经过两周多系统的web学习，我们已经对html和浏览器有了较为深入的了解，那么在实现我们想要达到的效果之后，我们要如何对我们所涉及的网页进行美化呢？

今天下午我是V神但是此时此刻 CSS 你是我的神！！！

一、CSS

1.CSS是什么？

CSS 即层叠样式表 (Cascading Style Sheets)。是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.CSS样式如何引用？

css的引用方式主要有以下三种

1.内嵌式--CSS写在style标签内

<!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>
        li{
            list-style-type: none;;
        }
    </style>
</head>

2.外联式--CSS样式写在一个单独的.css文件中

在这里插入图片描述

<!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="./my.css">
    
</head>

3.行内式--CSS写在标签的style属性里

<body>
    <div style="color: blueviolet;">此时此刻，在这个舞台上，欧豪，你，是我的神</div>
</body>

3.CSS进阶

字体样式

<1>字体大小 font-size

在这里插入图片描述

<2>字体粗细 font-weight

正常	normal	400
加粗	bold	700

<3>字体样式（是否倾斜）font-style

正常值	normal
倾斜	italic

<4>字体 font-famliy
在这里插入图片描述

无衬线字体	sans-serif
衬线	serif
等宽字体	monospace

<5>字体相关属性的连写 font(复合属性)

<style>
        div{
            font:italic 700 32px 宋体;
        }
    </style>

如果给同一个标签设置了相同的属性，此时样式会层叠

文本样式

<1>文本缩进 text-indent

数字+px
数字+em（1em = 当前标签的font-size的大小）

<2>文本水平对齐方式 text-align

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

text-align:center 能让

文字
span、a标签
input标签、img标签

如果要让文本水平居中对齐，text-align属性给文本所在标签（也就是文本的父元素）设置

<3>文本修饰 text-decoration

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

<4>行高 line-height

可以通过设置行高使文字垂直方向居中

在这里插入图片描述

背景样式

<1>背景颜色 background（bgc）
<2>背景图片 background-image（bgi）
<3>背景平铺 background-repeat（bgr）

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向平铺
repeat-y	沿着垂直方向

<4>背景位置 background-position（bgp）
在这里插入图片描述

二、选择器

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>
        div {
            color: aqua;
        }
    </style>
</head>
<body>
    <div style="color: blueviolet;">你是我的神</div>
</body>
</html>

2.类选择器

联想到c语言里的函数函数需要声明和调用才能生效
类需要定义和调用才能生效

在这里插入图片描述

3.id选择器

从前车马书信慢，一生只够爱一个人
现在网络发达，id选择器还是只能找一个标签做一辈子的伴侣
在这里插入图片描述

4.通配符选择器

找到页面中的所有标签，设置样式

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

主要用于清除默认样式

5.后代选择器

会选中所有后代

<!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="./my.css">
    <style>
        div p {
            color: brown;
        }
    </style>
</head>
<body>
    <div>
        <p>我是div的儿子</p>
    </div>
</body>
</html>

在这里插入图片描述

6.子代选择器

只会选中他的“儿子”

在这里插入图片描述

7.并集选择器

同时选中多组标签，设置相同的样式

div,p{
            color: antiquewhite;
        }

此时body内的p标签和div标签都会被选中并更改颜色

8.交集选择器

选中页面中同时满足多个选择器的标签

<!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>
        .box {
            color: blueviolet;
        }
        div.box {
            color: brown;
        }
    </style>
</head>
<body>
    <p>我是引用box类的p标签</p>
    <div>我是没有引用box类的div标签</div>
    <div class="box">我是引用box类的div标签</div>
</body>
</html>

在这里插入图片描述

9.伪类选择器

选中鼠标悬停在元素上的状态，设置样式

 <style>
        div:hover{
            color: antiquewhite;
        }
 </style>

鼠标放在div上的时候标签就会变成奶白色！！!

三、盒子模型

1.什么是盒子模型？

页面中的每一个标签，都可以看作是一个“盒子”，通过盒子的视角更方便地进行布局
浏览器在渲染（显示）网页时，会将网页中的元素看作是一个个矩形的区域，我们也形象地称之为“盒子”
CSS中规定每个盒子分别由内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

2.内容的宽度和高度content

利用width和height属性默认设置盒子内容区域的大小

写法：属性:数字+px

3.边框 border

<1>单个属性

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid、虚线dashed、点线dotted
边框颜色	border-color	颜色取值

<2>连写形式

border:边框粗细边框样式边框颜色;

<3>单方向设置

只给盒子的某个方向单独设置边框

属性名	属性值
border-方位名词	连写的取值

border-left: 5px dotted #000;

3.盒子的尺寸（CSS3自动內减）

如果已知盒子尺寸，边框尺寸，通过手动计算设置 width 和 height 盒子的尺寸 = （width + 边框）*（height + 边框）

如果不想手动计算，可以使用css3中的自动內减功能

box-sizing: border-box;

一旦使用了自动內减，此时的 width 和 height 就是盒子的尺寸

4.内边距padding和它的多值问题

padding可以当作复合属性使用，表示单独设置某个方向的内边距（最多取四个值）

<style>
        div{
            padding: 10px 20px 30px 40px;
            /*四值：  上   右   下    左*/
            padding: 10px 20px 30px;
            /*三值：  上   左右  下*/
            padding: 10px 20px;
            /*两值：  上下 左右*/
        }
    </style>