CSS基础

南喑

已于 2022-06-19 18:36:50 修改

阅读量218

点赞数

文章标签： css 前端

于 2022-06-18 21:09:21 首次发布

本文链接：https://blog.csdn.net/weixin_57178511/article/details/125349101

版权

认识CSS

CSS是什么/CSS的作用

CSS 指层叠样式表 (Cascading Style Sheets)，是一组样式设置的规则，用于控制页面的外观样式（如段落、图片等），通常保存在外部的 .css 文件中

CSS的基础用法

基础语法

css语法规则由两部分构成：① 选择器；② 一条或多条声明（用{}括起来，以分号;结尾)
选择器：要修饰的对象
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值

选择器 {
        属性名：属性值;
}
h2 {
       /*字体大小为20px*/
       font-size:20px;
}

引入方式

内联样式

在元素标签内部的style属性中设定CSS样式，适合于修改简单样式

内部样式表

写到html页面内部，将所有的CSS代码抽取出来，单独放在一个style标签中
特点：代码结构清晰，但并没有实现结构与样式完全分离，一般当单个页面需要特殊的样式时，就会使用内部样式表

外部样式表

样式单独写到CSS文件中(文件后缀名为.css），之后将CSS文件引入到HTML页面中使用，每个页面使用<link>标签链接到样式表
适用于某个样式应用于多个页面（如导航栏）的情况，此种方法也是最常见的引入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="./demo.css">
   <style>
      h1{
           color: red;
       }
   </style>
</head>
<body>
   <h1 style="color: yellow;">CSS基础</h1>
</body>
</html>

CSS三大特性

层叠性

相同选择器设置相同的样式，一个样式就会覆盖（层叠）另一个冲突的样式
就近原则，后来居上

继承性

子标签会继承父标签的某些样式，如文本颜色和字号；可继承的属性参考

优先级

!important>内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

CSS选择器

基础选择器

标签选择器

用HTML标签名称作为选择器，按标签名称分类，又叫元素选择器

标签选择器 {
   CSS样式
}
h1{
   color: red ;
}

优点：能够快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签

类选择器

以.作为前缀，自定义类名；通过HTML标签的class属性调用类选择器；可以给一个标签赋多个类名；也可以多个标签共用一个类名

.类名1 {
	color:pink;
}
<span class="类名1 类名2">内容1</span>
<span class="类名1">内容2</span>

id选择器

以#为前缀，自定义名称，通过HTML标签的id属性进行名称匹配；一个文档中一个id只能使用一次，不能与其他标签分享，一个标签也不能有多个id

.id1 {
   color:pink;
}
<span class="id1">内容1</span>

通配符选择器

用*定义，用于选取页面中的所有元素（标签）

*{
	CSS样式
  }

伪类选择器（在此主要讲解链接伪类选择器/锚伪类）

根据<a>当前不同的状态改变css样式

	/* 未访问的链接 */
    a:link {
        color: #FF0000;
    }

    /* 已访问的链接 */
    a:visited {
        color: #00FF00;
    }

    /* 鼠标悬停链接 */
    a:hover {
        color: #FF00FF;
    }

    /* 已选择的链接 */
    a:active {
        color: #0000FF;
    }

复合选择器（略）

CSS基本属性

文本

属性

color 文本颜色
letter-spacing 字符间距 px
line-height 行高 em、px
text-align 对齐 center left right justify（左右外边距对齐）
text-decoration 装饰线none overline underline line-through
text-indent 首行缩进 2em
字体
- font 在一个声明中设置所有的字体属性 顺序：斜体粗体字号/行高字体
- font-family 字体系列
- font-size 字号 px %
- font-style 斜体
- font-weight 粗体

单位

px 像素绝对单位
em 字符相对于父级的相对单位
% 百分比相对于父级的相对单位

颜色

颜色名
RGB 值
- rgb(x,x,x)每个颜色分量取值0-255
- rgb(x%, x%, x%)百分比值 0%-100%
- RGBA 值，透明度rgba(x,x,x,a) a值：0.0（完全透明）与 1.0（完全不透明）
十六进制数#rrggbb
opacity: value(0.0-1.0)|inherit;

背景

background-color
background-image： url（“路径”）
background-repeat： repeat（重复） repeat-x repeat-y no-repeat
background：颜色图片 repeat

阴影效果

text-shadow: 水平垂直模糊（px）颜色;多个阴影用逗号分隔的阴影列表
box-shadow:同理

盒子模型

页面中的所有元素都可以看成一个盒子，占据着一定的页面空间

组成

content内容
border边框
margin外边距
padding内边距
height高度
width宽度

盒子模型
一个盒子的实际宽度、高度:content+padding+border+margin

属性

overflow属性（当内容溢出盒子框时，overflow属性取值）
- hidden 超出部分不可见
- scroll 显示滚动条
- auto 如果有超出部分，显示滚动条
border属性
- border-width： px、 thin、medium、thick
- border-style:
  - none: 默认无边框
  - dotted: 定义一个点线边框
  - dashed: 定义一个虚线边框
  - solid: 定义实线边框
  - double: 定义两个边框。两个边框的宽度和 border-width 的值相同
  - groove: 定义3D沟槽边框。效果取决于边框的颜色值
  - ridge: 定义3D脊边框。效果取决于边框的颜色值
  - inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
  - outset: 定义一个3D突出边框。效果取决于边框的颜色值
- border-color：颜色
- border: width style color
- border-radius: em px %;
padding属性和margin属性
- 对浏览器默认的设置清零
```
* { 
margin: 0; 
padding: 0;
}
```
- 取值：px，%(外层盒子的宽度和高度)
- 组成：上右下左（可缩写）如：
```
margin:1px; == margin:1px 1px 1px 1px; 
margin:1px 2px; == margin:1px 2px 1px 2px;
margin:1px 2px 3px; == margin:1px 2px 3px 2px; 
margin:1px 2px 1px 3px; 注意，这里虽然上下边距都为1px，但是这里不能缩写。
```
- 水平居中
  - 图片、文字水平居中 text-align:center；
  - div水平居中 margin:0 auto;（浏览器自动计算）
- 垂直居中
  - 设定行高（line-height=height）
  - 利用浮动/定位浮动/定位详细介绍