CSS基础

发布于：2024-12-18 ⋅ 阅读:(119) ⋅ 点赞:(0)

CSS


CSS(Cascading Style Sheets， 层叠样式表 )能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，并能够做到页面的样式和结构分离，简单来说就是CSS用于控制页面的展示效果，而HTML决定页面的结构。

基本语法

选择器 + {一条/N条声明}
选择器决定修改的对象，即针对谁修改，声明决定修改的内容，即修改什么，声明中的属性是键值对，用 ; 区分键值对，使用 : 区分键和值，例如：

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

CSS 要写到 style 标签中（引入方式中还会介绍其他写法），style 标签可以放到页面任意位置，一般放到 head 标签内，CSS 使用 /* */ 作为注释，快捷键使用 ctrl + / 进行注释和去除注释。

引入方式

内部表样式

即前面的写在 style 标签中，直接嵌入到 html 内部，理论上来说 style 放到 html 的任何位置都行，但是一般都是放到 head 标签中

优点：这样做能够让样式和页面结构分离
缺点：分离的还不够彻底，尤其是 CSS 内容多的时候，难以阅读HTML的结构

这种引入方式在实际开发中不常用，尽管搜狗搜索中仍然保留着这种写法。

行内表样式

通过 style 属性, 来指定某个标签的样式，例如：

<div style="color:green">这是绿色</div>

在这里插入图片描述
优点：只针对某个标签生效，使用便捷，可以快速知道某个标签的CSS样式
缺点：不能写太复杂的样式，容易导致代码臃肿混乱

只适合于写简单样式，需要注意这种写法优先级较高，会覆盖其他的样式，类似于局部变量优先于全局变量

外部样式

即将外部CSS文件引入到HTML文件中，这是实际开发中最常用的做法，做法为：

  1. 创建一个 CSS 文件
  2. 使用 link 标签引入 该CSS文件
<link rel="stylesheet" href="temp.css">

rel="stylesheet"表示被链接的文档是一个样式表，href="temp.css"填充该CSS文件的路径

例如：
1.创建CSS文件

创建一个名为temp.css的文件，要注意文件名后缀为.css，在里面编辑如下内容：

div {
    color: red;
}

2.引入CSS文件
在HTML文件的head标签中引入temp.css文件

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="temp.css">
</head>
<body>
    <div>外部样式</div>
</body>

在这里插入图片描述
优点：样式和结构彻底分离了
缺点：受到浏览器缓存影响，修改之后不一定立刻生效

缓存是计算机中一种常见的提升性能的技术手段，网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的，如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取，就可以使用缓存先存起来(就是存在本地磁盘上了)，从而提高访问效率. 可以通过 ctrl + F5 强制刷新页面，强制浏览器重新获取 css 文件

代码风格

虽然 CSS 不区分大小写，我们开发时一般统一使用小写字母，同时为了代码清晰性，冒号后面带空格，选择器和 { 之间也有一个空格。编写CSS代码时的风格一般有两种：
1.紧凑风格

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

2.展开风格

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

推荐使用展开风格

选择器

选择器用于选中页面中指定的标签元素，只有先选中元素，才能设置元素的属性，具体学习参考选择器

基础选择器

  1. 标签选择器

直接使用标签当作选择器，这样做能快速为同一类型的标签都选择出来，但是不能差异化选择，例如：

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

这样所有P标签的字体颜色都为红色

  1. 类选择器

即通过为一个CSS样式起一个类名，其该类名为选择器进行CSS美化，该效果会作用到所有使用该类名的标签上

<style>
    .blue {
        color: blue;
    }
</style>
<p class="blue"> 大熊猫</p>
<p> 大熊猫</p>
<div class="blue">小熊猫</div>
<div>小熊猫</div </head>

在这里插入图片描述
使用类选择器差异化表示不同的标签，同时可以让多个标签的都使用同一个标签

使用类选择器时需要注意的语法细节：

  • 类名用 . 开头的
  • 下方的标签使用 class 属性来调用
  • 一个类可以被多个标签使用
  • 一个标签也能使用多个类，多个类名要使用空格分割，这样做可以把相同的属性提取出来，让代码更好复用
  • 如果是长的类名，可以使用 - 分割
  • 不要使用纯数字，或者中文以及标签名来命名类名

代码示例： 使用多个类名，达到简化代码的效果

    <style>
        .blue {
            color: blue;
        }

        .green {
            background-color: green;
        }

        .box {
            width: 200px;
            height: 150px;
        }
    </style>
    <div class="blue green">小熊猫</div>
    <div class="blue green box">小熊猫</div </head>

在这里插入图片描述

  1. id 选择器

即通过为某个标签起一个唯一id名，利用该id名作为选择器进行CSS美化

<style>
    #panda {
        color: red;
    }
</style>
<div id="panda">小熊猫</div>
  • CSS 中使用 # 开头表示 id 选择器
  • id 选择器的值必须和 html 中某个元素的 id 值相同
  • html 的元素 id 不必带 #
  • id 是唯一的，不能被多个标签使用，这是和 类选择器 最大的区别
  1. 通配符选择器

使用 * 的作为选择器，选取所有的标签

<style>
    * {
        color: red;
    }
</style>
<div">小熊猫</div>
<p>大熊猫</p>

在这里插入图片描述
通配符选择器通常用于覆盖CSS的默认样式

复合选择器

  1. 后代选择器

又叫包含选择器，用于选择某个父元素中的某个子元素

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

<style>
    ol li {
        color: red;
    }
</style>

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<ol>
       <li>ddd</li>
       <li>eee</li>
       <li>fff</li>
</ol>

在这里插入图片描述
需要注意其后代还包括孙子以及更往后的元素

  1. 子选择器

它和后代选择器类似，但是只能选择子标签（该子标签的后代标签也会被选中），选择器的两个元素使用大于号 > 分割，例如：

<style>
    .parent>p {
        color: red;
    }
</style>

<div class="parent">
    <p>这是第一个段落。</p>
    <div>
        <p>这是嵌套段落，不会被选中。</p>
    </div>
    <p>这是第二个段落。</p>
    <p>
        <span>选中</span>
    </p>
</div>

在这里插入图片描述

  1. 并集选择器

用于选择多组标签统一对它们进行CSS美化，各个标签之间通过逗号 ; 分割，任何基础选择器都可以使用并集选择器，并集选择器建议竖着写. 每个选择器占一行，最后一个选择器不能加逗号，例如：

<style>
    div,
    h3 {
        color: red;
    }
</style>

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

在这里插入图片描述

  1. 伪类选择器

1）链接伪类选择器

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

清空浏览器历史记录即可（快捷键ctrl + shift + delete）就可以让一个已经被访问过的链接恢复成未访问的状态

在使用时需要按照LVHA的顺序书写链接伪类选择器

  1. :focus 伪类选择器

用于为当前获得焦点的元素定义特定的样式

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

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

在这里插入图片描述

各种选择器的优先级如下，数值越大优先级越高：
在这里插入图片描述
特异性值越高的选择器所定义的样式将覆盖特异性值较低的选择器所定义的样式。

以上的所有选择器只是 CSS2 标准中支持的选择器，在 CSS3 中还做出了一些补充。

常用元素属性

关于元素属性的详细学习可以参考CSS 参考手册

字体属性

1. 字体类型设置：font-family

<style>
    #p1 {
        font-family: '宋体';
    }

    #p2 {
        font-family: 'Microsoft YaHei';
    }
</style>

<p id="p1">这是宋体</p>
<p id="p2">这是微软雅黑</p>

  • 字体名称可以用中文，但是不建议
  • 多个字体之间使用逗号分隔，(从左到右查找字体，如果都找不到，会使用默认字体)
  • 如果字体名有空格，使用引号包裹，使用单引号和双引号都可以，就算字体名没有空格，也可以使用引号包裹
  • 建议使用常见字体，否则兼容性不好

2. 字体大小设置： font-size

<style>
    #p1 {
        font-size: 20px;
    }

    #p2 {
        font-size: 40px;
    }
</style>

<p id="p1">这是小</p>
<p id="p2">这是大</p>

在这里插入图片描述
实际上它设置的是字体中字符框的高度，实际的字符字形可能比这些框高或矮

(chrome 默认是 16px)

  • 不同的浏览器默认字号不一样，在实际中我们最好进行字体设置
  • 字体设置时需要写明单位：px
  • 可以给 body 标签使用 font-size，它的子元素（如段落、标题、链接等）将默认继承这个值
  • 标题标签需要单独指定大小

3. 字体粗细设置：font-weight

<style>
    #p1 {
        font-weight: 100;
    }

    #p2 {
        font-weight: 900;
    }
</style>

<p id="p1">这是细</p>
<p id="p2">这是粗</p>

在这里插入图片描述
可以使用数字表示粗细，取值范围是 [100,900]，其中400表示正常字体，粗细不变，小于400越来越细，大于400越来越粗，一般700表示加粗。

4. 字体样式设置：font-style

<style>
    #p1 {
        font-style: italic;
    }

    #p2 {
        font-style: normal;
    }
</style>

<p id="p1">这是倾斜字体</p>
<p id="p2">这是正常字体</p>

在这里插入图片描述
值 italic 表示字体倾斜，值 normal 表示取消字体倾斜

5. 字体颜色设置：color:
字体颜色有3种表示方法：

  1. 使用英文单词，如red、green
  2. 使用rgb三原色形式，如白色：rgb(255, 255, 255)，黑色：rgb(0, 0, 0)
  3. 使用16进行表示rgb三原色，如白色：#ffffff，黑色：#000000，其中#ff00aa这种可以简写成#f0a，只有每一个原色的2个值都相同才可以约
<style>
    #p1 {
        color:red;
    }

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

<p id="p1">这是红色</p>
<p id="p2">这是绿色</p>

在这里插入图片描述

6.文本对齐：text-align

<style>
    #p1 {
        text-align:left;
    }

    #p2 {
        text-align:right;
    }
</style>

<p id="p1">这是左边</p>
<p id="p2">这是右边</p>

在这里插入图片描述
text-align的常见值包括：left（居左）、right（居右）、center（居中）、justify（两端对齐）

需要注意它不仅能控制文本对齐，也能控制图片等元素居中或者靠右

7.文本装饰：text-decoration
常用取值：

  • underline：下划线
  • none：空值，可以给 a 标签去掉下划线
  • overline：上划线
  • line-through：删除线

8.文本缩进：text-indent
用于控制段落的首行缩进，其它行不受影响

text-indent: [值];
  • 单位可以使用 px 或者 em，使用 em 作为单位更好，1 个 em 就是当前元素的文字大小
  • 缩进可以是负的，表示往左缩进，会导致文字像被裁剪一样只有一部分，例如
<style>
    #p1 {
        text-indent: -2em;
    }
</style>

<p id="p1">这是左边</p>

在这里插入图片描述
9.行高设置：line-height
行高指的是上下文本行之间的基线距离
行高 = 上边距 + 下边距 + 字体大小
上下边距是相等的，如果字体大小是 16px，行高 40px，上下边距就分别是 12px

  • 行高也可以取 normal 等值
  • 行高等于元素高度，就可以实现文字居中对齐，因为文字的行高正好占据了整个元素的高度，没有多余的空间使得文字可以向上或向下偏移。它只适用于单行文字的垂直居中

背景属性

1.设置背景颜色：background-color

background-color: [指定颜色]

默认是 transparent (透明) 的，可以通过设置颜色的方式修改，颜色的表示和前面所提的三种方法相同

<style>
    #p1 {
        background-color: green
    }
</style>

<p id="p1">绿色背景</p>

在这里插入图片描述
2.设置图片背景

background-image: url(...);

<style>
    body{
        background-image: url(tmp.png);
    }
</style>
<body>
    <h1>歌手陈慧娴</h1>
</body>

在这里插入图片描述

  • url 可以是绝对路径, 也可以是相对路径
  • url 上可以加引号，也可以不加

3.设置背景平铺：background-repeat
平铺，即平着铺展开，是一种重复显示图片直到充满整个屏幕或指定区域的显示方式。当选择平铺作为背景图片的显示方式时，计算机会将这张图片重复排列，直到它完全覆盖整个背景区域。

background-repeat: [平铺方式]

重要取值:

  • repeat: 平铺
  • no-repeat: 不平铺
  • repeat-x: 水平平铺
  • repeat-y: 垂直平铺
<style>
    body{
        background-image: url(tmp.png);
        background-repeat:no-repeat;
    }
</style>
<body>
    <h1>歌手陈慧娴</h1>
</body>

在这里插入图片描述

  • 默认是 repeat
  • 背景颜色和背景图片可以同时存在，此时背景图片在背景颜色的上方

4.设置背景位置：background-position

background-position: x y;

参数有三种风格:

  • 方位名词: (top, left, right, bottom)
  • 精确单位: 坐标或者百分比(以左上角为原点)
  • 混合单位: 同时包含方位名词和精确单位
<style>
    body{
        background-image: url(tmp.png);
        background-repeat:no-repeat;
        background-position:center top;
    }
</style>
<body>
    <h1>歌手陈慧娴</h1>
</body>

在这里插入图片描述

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

5.设置背景尺寸：background-size

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

取值为：

  • 具体大小：: 如 40px 60px 表示宽度为 40px, 高度为 60px，如果只给出一个值，则第二个值会被设置为“auto”，即高度自动调整以保持图像的原始纵横比。
  • 使用百分比：使用两个值（百分比）来分别设置宽度和高度，两个值之间用空格隔开。如果只给出一个值，则第二个值也会被设置为“auto”
  • cover：保持图像的纵横比，并将图像缩放成将完全覆盖背景定位区域的最小大小，可以确保图像能够完全覆盖背景区域，但可能会导致图像的某些部分（通常是边缘部分）无法显示在背景中
  • contain：保持图像的纵横比，并将图像缩放成将适合背景定位区域的最大大小，确保图像能够完整地显示在背景定位区域中，但可能不会完全覆盖整个背景区域，从而留下空白边缘。

6.圆角矩形：border-radius
使边框带圆角效果

border-radius: length;

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

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

<div>
    圆角矩形
</div>

在这里插入图片描述

  • 让 border-radius 的值为正方形宽度的一半得到一个圆形
  • 让 border-radius 的值为矩形高度的一半得到一个圆角矩形
  • border-radius 是一个复合写法，实际上可以针对四个角分别设置
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

以上写法等价于：

border-radius:2em;

四个角的圆半径可以不同

元素的显示模式

标签显示模式是指HTML元素（标签）在页面上以何种方式进行显示。它决定了元素在页面布局中的位置和与其他元素的交互方式。常见的标签显示模式有：块级元素（Block-level Elements）、行内元素（Inline-level Elements）、行内块元素（Inline-block Elements）

1.块级元素（Block-level Elements）：
它的特点为独占一行，即每个块级元素都会从新的一行开始并占据整行宽度（或设置的宽度），可以为它设置宽度、高度、内边距和外边距。常见元素有<div>、<h1>至<h6>、<p>、<ul>、<ol>、<li>、<table>、<form>等，里面可以放行内和块级元素

2.行内元素（Inline-level Elements）：
它的特点为不会独占一行，多个行内元素可以在同一行内排列。无法直接设置宽度和高度（设置无效，宽度和高度由内容决定）。只能包含文本或其他行内元素。可以设置水平方向上的内边距和外边距，但垂直方向上的设置无效。常见元素：如<a>、<span>、<strong>、<em>、<b>、<i>、<u>、<del>、<s>、<ins>等。行内元素只能容纳文本和其他行内元素，不能放块级元素

3.行内块元素（Inline-block Elements）：
它的特点为不会独占一行，但可以设置宽度和高度。与相邻的行内元素或行内块元素在同一行上显示。可以设置内边距和外边距。一般不容纳其他块级元素（但可以包含行内元素或内容）。常见元素：如<img>、<input>、<label>、<select>、<option>等。需要注意的是，这些元素在HTML中通常被视为行内元素，但可以通过CSS的display: inline-block;属性将其转换为行内块元素。常用于需要在同一行内显示且具有特定宽度和高度的元素，如图片、输入框和标签等。

使用 display 属性可以修改元素的显示模式，如可以把 div 等变成行内元素，也可以把 a、span 等变成块级元素

  • display: block 改成块级元素
  • display: inline 改成行内元素
  • display: inline-block 改成行内块元素

盒模型

每一个 HTML 元素就相当于是一个矩形的 “盒子”，这个盒子由这几个部分构成：

  • 边框 border
  • 内容 content
  • 内边距 padding
  • 外边距 margin

在这里插入图片描述
1.边框
主要属性如下：

  1. 粗细：border-width，单位为px
  2. 样式：border-style, 默认没边框，solid 实线边框，dashed 虚线边框 ，dotted 点线边框
  3. 颜色：border-color

可以改四个方向的任意边框：

border-top/bottom/left/right

需要注意边框会撑大盒子，即保持Content部分不变，加上边框后，盒子就变大了，通过 box-sizing 属性可以修改浏览器的行为，使边框不再撑大盒子：

* {
    box-sizing: border-box;
}

这样Content部分的大小可能会变小

2.内边距
使用padding 设置内容和边框之间的距离，可以给四个方向都加上边距，单位为px：

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

内边距也会影响到盒子大小(撑大盒子)，使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子，和上面的 border 是类似的
可以把多个方向的 padding 合并到一起以简化写法：

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

3.外边距
控制盒子和盒子之间的距离，可以给四个方向都加上边距：

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

同内边距一样，它也有复合写法，规则是类似的：

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

外边距本身不会撑大盒子

把水平 margin 设为 auto就可以实现水平居中效果，以下三种写法均可：

margin-left: auto; margin-right: auto;

margin: auto;

margin: 0 auto;

这个水平居中的方式和 text-align 不一样，margin: auto 是给块级元素用得到，text-align: center 是让行内元素或者行内块元素居中的，另外，对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式

浏览器会给元素加上一些默认的样式，尤其是内外边距，不同浏览器的默认样式存在差别，为了保证代码在不同的浏览器上都能按照统一的样式显示，往往我们会去除浏览器默认样式，使用通配符选择器即可：

* {
    marign: 0;
    padding: 0;
}

弹性布局

flex 是 flexible box 的缩写，意思为 “弹性盒子”，任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局，flex 布局的本质是给父盒子添加 display:flex 属性，来控制子盒子的位置和排列方式，当父元素设置为 display: flex 之后，子元素的 float, clear, vertical-align 都会失效，需要注意这些元素需要加载它的直接父标签下面。

基础概念：

  • 被设置为 display:flex 属性的元素，称为 flex container
  • 它的所有子元素立刻称为了该容器的成员，称为 flex item
  • flex item 可以纵向排列，也可以横向排列，称为 flex direction(主轴)

常用属性：

  1. justify-content，设置主轴上的子元素排列方式

在这里插入图片描述

  1. align-items，设置侧轴上的元素排列方式

在这里插入图片描述
stretch(拉伸)是 align-content 的默认值，意思是如果子元素没有被显式指定高度，那么就会填充满父元素的高度，align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents

Chrome 调试工具

可以使用浏览器查看 CSS 属性

1. 打开Chrome 调试工具

有三种方式可以打开 Chrome 调试工具：

  • 直接按 F12 键
  • 鼠标右键页面–>选择检查
  • 选择设置–>更多工具–>开发者工具

2. 查看各个标签页
各个标签页含义如下：

  • elements 查看标签结构
  • console 查看控制台
  • source 查看源码+断点调试
  • network 查看前后端交互过程
  • application 查看浏览器提供的一些扩展功能(本地存储等)

其他的暂时不需要理会

3.elements 标签页使用

  • ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小.
  • 使用 左上角 箭头选中元素
  • 右侧可以查看当前元素的属性，包括引入的类
  • 右侧可以修改选中元素的 css 属性，例如颜色，可以点击颜色图标，弹出颜色选择器，修改颜色，例如字体大小, 可以使用方向键来微调数值
  • 此处的修改不会影响代码，刷新进行还原
  • 如果 CSS 样式写错了，会在这里提示 (黄色感叹号)

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布