CSS基础

仲夏是荔枝味

于 2024-07-31 19:12:15 发布

阅读量684

点赞数 25

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/2202_76101487/article/details/140824598

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 关于css

1.1 CSS 是什么

css是层叠样式表 (Cascading Style Sheets)，CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

1.2 基本语法规范

格式：

选择器 + {一条/N条声明}

        选择器决定针对谁修改 (找谁)

        声明决定修改啥. (干啥) 声明的属性是键值对.

        使用 ; 区分键值对, 使用 : 区分键和值.

注意:

1、CSS 要写到 style 标签中(后面还会介绍其他写法)

2、style 标签可以放到页面任意位置. 一般放到 head 标签内.

3、CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .

input{
    width: 1000px;
    height: 30px;
    margin-top: 5px;
    border-radius: 9px;
    border: none;
}

1.3 引入方式

1.3.1 内部样式表

写在 style 标签中. 嵌入到 html 内部. 理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中；

优点: 这样做能够让样式和页面结构分离.

缺点: 分离的还不够彻底. 尤其是 css 内容多的时候

1.3.2 行内样式表

通过 style 属性, 来指定某个标签的样式. 只适合于写简单样式. 只针对某个标签生效.

缺点: 不能写太复杂的样式. 这种写法优先级较高, 会覆盖其他的样式.

<style>
    div {
        color: red;
   }
</style>
<div style="color:green">

1.3.3 外部样式

实际开发中最常用的方式.

1. 创建一个 css 文件.

2. 使用 link 标签引入 css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/commom.css">
</head>
<body>
</body>
</html>

优点: 样式和结构彻底分离了.

缺点: 受到浏览器缓存影响, 修改之后不一定立刻生效.

虽然 CSS 不区分大小写, 我们开发时统一使用小写字母，一般来说：之后加空格，同时选择器和{之间也要带空格；

2. 选择器

选择器的功能：选中页面中指定的标签元素.；要先选中元素, 才能设置元素的属性；

2.1 选择器的种类

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

        标签选择器

        类选择器

        id 选择器

        通配符选择器

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

        后代选择器

        子选择器

        并集选择器

        伪类选择器

参考文档: https://www.w3school.com.cn/cssref/css_selectors.asp>

2.2 基础选择器

2.2.1 标签选择器

特点:

能快速为同一类型的标签都选择出来.

但是不能差异化选择
<style>
p {
    color: red;
}
div {
    color: green;
}
</style>
<p>沈梦瑶</p>
<div>袁一琦</div>

2.2.2 类选择器

特点:

差异化表示不同的标签

可以让多个标签的都使用同一个标签.
<style>
    .blue {
        color: blue;
   }
</style>
<div class="blue">沈梦瑶</div>
<div>袁一琦</div>
语法细节:

1、类名用 . 开头的

2、下方的标签使用 class 属性来调用.

3、一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)

4、如果是长的类名, 可以使用 - 分割.

5、不要使用纯数字, 或者中文, 以及标签名来命名类名

2.2.3 id 选择器

和类选择器类似.

1、CSS 中使用 # 开头表示 id 选择器

2、id 选择器的值和 html 中某个元素的 id 值相同

3、html 的元素 id 不必带 #

4、id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)
<style>
    #ha {
        color: red;
   }
</style>
<div id="ha">蛤蛤蛤</div>

2.2.4 通配符选择器

使用 * 的定义, 选取所有的标签.

2.2.5 基础选择器小结

2.3 符合选择器

（略）

3. 常用元素属性

CSS 属性有很多, 可以参考文档 https://www.w3school.com.cn/cssref/index.asp

3.1 字体属性

3.1.1 设置字体

body {
    font-family: '微软雅黑';
    font-family: 'Microsoft YaHei';
}
1、多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )

2、如果字体名有空格, 使用引号包裹.
<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>

3.1.2 大小

注意事项：

1、不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)

2、可以给 body 标签使用 font-size

3、要注意单位 px 不要忘记.

4、标题标签需要单独指定大小

注意: 实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮
p {
    font-size: 20px;
}

3.1.3 粗细

p {
 font-weight: bold;
    font-weight: 700;
}
1、可以使用数字表示粗细.

2、700 == bold, 400 是不变粗, == normal

3、取值范围是 100 -> 900

3.1.4 文字样式

/* 设置倾斜 */

font-style: italic;

/* 取消倾斜 */

font-style: normal;

3.2 文本属性

3.2.1 文本颜色

认识 RGB：

我们的显示器是由很多很多的 "像素" 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.

我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.

计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF). 数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.

设置文本颜色

十六进制形式表示颜色, 如果两两相同, 就可以用一个来表示. #ff00ff => #f0f

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

3.2.2 文本对齐

控制文字水平方向的对齐.不光能控制文本对齐, 也能控制图片等元素居中或者靠右

center: 居中对齐

left: 左对齐

right: 右对齐
text-align: [值];

3.2.3 文本装饰

text-decoration: [值];

常用取值:

        underline 下划线. [常用]

        none 啥都没有. 可以给 a 标签去掉下划线.

        overline 上划线. [不常用]

        line-through 删除线 [不常用]

3.2.4 文本缩进

控制段落的首行缩进 (其他行不影响)
text-indent: [值];
1、单位可以使用 px 或者 em.

2、使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.

3、缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

3.2.5 行高

行高指的是上下文本行之间的基线距离.

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

        顶线

        中线

        基线 (相当于英语四线格的倒数第二条线)

        底线

        内容区：底线和顶线包裹的区域，即下图深灰色背景区域

其实基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离

        line-height: [值];

注意1: 行高 = 上边距 + 下边距 + 字体大小

注意2: 行高也可以取 normal 等值. 这个取决于浏览器的实现. chrome 上 normal 为 21 px

注意3: 行高等与元素高度, 就可以实现文字居中对齐
<style>
    .line-height .two {
        height: 100px;
        line-height: 100px;
   }
</style>
<div class="line-height">
    <div class="two">
       文本垂直居中
    </div>
</div>

3.3 背景属性

3.3.1 背景颜色

background-color: [指定颜色]

默认是 transparent (透明) 的. 可以通过设置颜色的方式修改.

3.3.2 背景图片

background-image: url(...);

比 image 更方便控制位置(图片在盒子中的位置)

注意:

        1. url 不要遗漏.

        2. url 可以是绝对路径, 也可以是相对路径

        3. url 上可以加引号, 也可以不加.

3.3.3 背景平铺

background-repeat: [平铺方式]

repeat: 平铺

no-repeat: 不平铺

repeat-x: 水平平铺

repeat-y: 垂直平铺

一般来说，默认是 repeat.背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方.

3.3.3 背景位置

background-position: x y;

参数有三种风格:

        1. 方位名词: (top, left, right, bottom)

         2. 精确单位: 坐标或者百分比(以左上角为原点)

        3. 混合单位: 同时包含方位名词和精确单位

注意：

        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轴是往下指的).

3.3.4 背景尺寸

background-size: length|percentage|cover|contain;
1、可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px

2、也可以填百分比:按照父元素的尺寸设置.

3、cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

4、把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

注意体会 contain 和 cover 的区别. 当元素为矩形(不是正方形) 时, 区别是很明显的：

contain：

cover：

4.1 圆角矩形

通过 border-radius 使边框带圆角效果.

4.1.1 基本用法

border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈
div {
    width: 200px;
    height: 100px;
    border: 2px solid green;
    border-radius: 10px;
}

4.1.2 生成圆形

让 border-radius 的值为正方形宽度的一半即可

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

4.1.3 生成圆角矩形

让 border-radius 的值为矩形高度的一半即可
div {
    width: 200px;
    height: 100px;
    border: 2px solid green;
    border-radius: 50px;
}

4.2 展开写法

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;

ps：综上所所述，本次的内容就到这里了，如果对大家有所帮助的话就请一键三连哦！！！