资讯详情

CSS基础总结

CSS简介

文章目录

1.CSS是什么

  • CSS它是一种标记语言，CSS主要用于设置页面的文本内容（字体、大小、对齐）、图片的形状（宽度、框架风格、边缘距离）、布局和外观显示。

2.CSS的作用

  • CSS让我们的网页更加丰富多彩，布局更加灵活自由。

  • CSS可以美化HTML,让HTML更漂亮，让页面布局更简单。

一. CSS语法基础(1)

**: 选择器，声明样式

  1. 选择器用于指定样式html标签，花括号是对象设置的具体风格。

  2. 属性和属性值"键值对"形式出现。

  3. 属性是指定对象设置的样式属性，如字体大小，文本颜色等。

  4. 在属性和属性值之间使用英文冒号分开。

  5. 之间使用多个键值分号进行区分。

    p { 
                       color: blue;             font-size:20px;         }

1. CSS选择器

  • 选择器分为基础选择器和复合选择器两个大类。

  • 基础选择器是由单个选择器组成的。

  • 基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器。

选择器就是根据不同需求把不同的标签选择出来。

1.1 标签选择器

  • 标签选择器可以把某一类标签全部选择出来。

  • 能快速为页面中同一类型的标签统一设置样式。

  • 不能设计差异化样式，智能选择全部的当前标签。

    <body>
    <p>段落</p>
    <div>盒子</div>
</body>

    p { 
          
            color: aqua;
        }
div { 
          
            color: blueviolet;
        }

1.2 类选择器

  • 差异化选择不同的标签，单独选1个或者多个标签。

  • 类选择器使用.进行表示，后面紧跟类名

  • 长名称的类名可以使用-来命名

  • 使用英文字母命名

    <body>
    <div class="blue">黑色毛衣</div>
    <div class="star-sing">七里香</div>
</body>

     .blue { 
          
            color: blue;
        }
 .star-sing { 
          
            color: chocolate;
        }

  • 可以把一些标签相同的样式(公共部分)放到一个类里

  • 这些标签都可以调用这个公共得到类，然后再调用自己独有的类

    <body>
    <div class="box red">红色</div>
    <div class="box gree">绿色</div>
</body>

    .box { 
          
    width: 100px;
    height: 100px;
}

.red { 
          
    background-color: red;
    font-size: 20px;
}

.gree { 
          
    background-color: green;
    font-size: 30px
}

1.3 id选择器

  • id选择器可以为标有特定的HTML元素指定特定的样式

  • HTML元素以id属性来设置id选择器,CSS中id选择器以#来定义

  • id属性只能在每个HTML文档中出现一次

    <body>
    <div id="pink">迈克尔·杰克逊</div>
    <div>刘德华</div>
</body>

    #pink {
    color: pink;
}

  • 类选择器就类似名字，一个名字可以有很多人同名。
  • id选择器就好比每个人的身份证号码，统一不重复。
  • id选择器和类选择器最大的不同在于使用的次数上。
  • 类选择器在修改样式中使用最多，id选择器一般用于页面唯一的元素上，经常和js搭配使用。

1.4 通配符选择器

  • 通配符选择器使用 * 来定义，表示选取页面中所有的元素(所有的标签)

  • 通配符选择器不需要调用，自动就给所有的元素使用样式

  • 特殊情况下才会用到，例如:清除所有的元素标签的内外边距

    * { 
          
  margin: 0;
  padding: 0;
}

2. CSS字体属性

  • 定义字体系列，大小粗细，文字样式等。

  • font: weight | size | style | family | …

2.1 font-weight 设置字体粗细

  • font-weight: nomal(默认值) | boder

  • font-weight: 400/700

  • 400等同于nomal(默认值) 不加粗

  • 700等同于boder 加粗

  • 开发中推荐使用数字

    h2 { 
          
            font-weight: 400;
            /* font-weight: normal; */
        }
.bold { 
          
            font-weight: 700;
            /* font-weight: bold; */
        }

2.2 font-size 设置字体大小

  • 一般情况下可以给body指定整个页面文字的大小

  • 标题标签比较特殊，需要单独指定文字大小

    body { 
          
	font-size: 18px;
}

2.3 font-style 设置字体风格

  • font-style: nomal(默认值) | italic(斜体)

  • 平时很少给文字加斜体，反而要给斜体标签em改为不倾斜字体

    p { 
          
            font-style: italic;
        }
em { 
          
            font-style: normal;
        }

2.4 font-family 设置字体系列

  • 可以使用中文，推荐使用英文，可以定义多个，默认从第一个开始用,没有则下一个

  • 多个单词组成的字体可以用引号

  • 在开发中经常定义在body标签里

    h2 { 
          
            font-family: '微软雅黑'
        }
body { 
          
            font-family: '宋体','Microsoft Yahei',tahoma,arial, 'Hiragino Sans GB';
        }

2.5 字体属性的复合写法

  • font: font-style font-weight font-size font-family
  • 一定要按照这个格式顺序来写，空格分隔
  • 若都是默认值,也必须保留font-size和font-family
font: italic 700 16px 'Microsoft yahei'

3. CSS文本属性

  • CSS 文本属性可定义文本的外观。
  • 比如文本颜色，文本对齐、文本装饰、文本缩进、行间距等

3.1 color 设置文本颜色

  • color: 单词名称 | 16进制 | rgb形式

  • 开发中最常用的是16进制形式

      div { 
          
            /* color: red; */
            color: #ff008c;    
            /* color: rgb(76, 0, 255); */
            
        }

3.2 text-align 设置文本对齐

  • text-align: left | center | right

  • 文本对齐有三种方式:左对齐，右对齐，居中对齐

    h3 { 
          
            text-align: center;
        }

3.3 text-decoration 设置文本装饰

  • text-decoration: none | underline | overline | line-through

  • 装饰文本:最常用就是下划线和默认无线。上划线和删除线不常用

    h1 { 
          
            text-decoration: underline;
        }
a { 
          
            text-decoration: none
        }

3.4 text-indent 设置文本缩进

  • text-indent: 像素 | 距离

  • 可指定缩进像素,也可指定2em，缩进两个文字大小的距离 em是相对单位，相对当前字体大小来缩进

    p { 
          
            /* text-indent: 20px; */
            text-indent: 2em;
        }

3.5 line-height 设置文本行间距

  • line-height: 像素

  • 文本行间距:文本高度、上间距、下间距组成

  • 文字行高等于盒子高度可以让盒子内元素垂直居中

       p { 
          
            line-height: 25px;
        }

4. CSS的引入方式

按照CSS样式书写的位置，CSS样式表可以分为三大类:

4.1 内部样式表

  • 写到html页面内部。是将所有的CSS代码取出来，单独放到<style>标签中。
  • <style>理论上可以放到HTML文档的任何地方，但一般会放在<head>中。
  • 通过此种方式，可以方便控制当前整个页面的元素样式设置。
  • 代码结构清晰，但是并没有完全实现结构与样式完全分离。
<!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: blue; } </style>
</head>
<body>
    <div>内部样式表</div>
</body>
</html>

4.2 行内样式表

  • 行内样式表适合修改样式比较简单、比较少的情况下

  • 直接在标签中用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>

</head>
<body>

    <div style="color: deeppink;font-size: 16px;">幸甚至栽歌以咏志</div>

</body>
</html>

4.3 外部样式表

  • 实际开发都是外部样式表，适合于样式比较多的情况
  • 样式单独写到CSS文件中，之后再把CSS文件引入到HTML文件中使用

  1. 新建.css后缀的文件，把css代码写入到文件中

  2. 在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>外部样式表</title>
    
    <link rel="stylesheet" href="07_外部样式表之css文件.css">
</head>
<body>
    <div>HTML负责写HTML的代码,CSS负责只写CSS的代码</div>
</body>
</html>

5. 调试工具

  1. 打开调试工具 -chrom f12

  2. Elements 元素

  3. 左边是html，右边是css

  1. ctrl+滚轮 放大代码大小
  2. 右边的css样式可以改动数值(键盘上下键或者直接输入)和查看颜色
  3. ctrl +0 复原浏览器大小
  4. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
  5. 如果有样式，但是样式前面有黄色感叹号，则是样式属性书写错误

二. CSS语法基础(二)

1. Emmet语法

  • 使用缩写形式，提高html,css的编写速度,vscode已经继承该语法

1.1 快速生成html结构语法

1.标签名+tab div tab 2.标签名+数字 div*5 3.父子关系 ul>li 4.兄弟关系 div+span 5.如果带有类名或者id名,直接.pcc 或者 #phh tab键 6.若生成的div类名是由顺序的，可以用自增符号$ 7.如果想要在生成的标签内部写内容，则{}

1.2 快速生成css结构语法

1.可以写属性提示后tab 2.可以变态快速，如:w100 h100 lh26

1.3 快速格式化代码的使用

1.格式化文档-shift+alt+f 2.设置-搜emmet.include 3.settings.json【用户】下配置: "editor.formatOnType":true, "editor.formatOnSave":true 设置一次，以后crl+s保存自动就格式化了

2. 复合选择器

  • 复合选择器是建立在基础选择器之上的

  • 更高效、准确的目标元素(标签)

  • 由两个或者多个基础选择器，通过不同的方式组合而成

  • 常用复合选择器包括:后代选择器，子元素选择器，并集选择器，伪类选择器等

2.1 后代选择器

  • 有包含关系,层层选择

  • 任何形式的选择器都可以作为后代选择器

    ul li { 
          
            color: red;
        }

ul li a { 
          
            color: green;
        }

.ol2 li a { 
          
            color: blueviolet;
        }

2.2 子元素选择器

  • 只能选择最近一级子元素

    div>a { 
          
            color: red;
        }

2.3 并集选择器

  • 可以选择多组标签，同时为他们定义相同的样式。

  • 通常用于集体声明。

  • 任何形式的选择器都可以作为并集选择器。

    div, p { 
          
            color: red;
        }

div, p, .home li { 
          
            color: red;
        }

2.4 伪类选择器

  • 用于向某些选择器添加效果，比如给链接添加效果
  • 用 : 来表示

  1. a:link 选择未访问过的连接

  2. a:visited 选择所有已访问过的链接

  3. a:hover 鼠标位于其上的链接

  4. a:active 选择活动链接(鼠标按下未弹起的链接)

    a:link { 
          
            color: #333;
            text-decoration: none;
        }

a:visited { 
          
            color: orange
        }

a:hover { 
          
            color: aqua;
        }

a:active { 
          
            color: red;
        }

    开发中最常用的格式

    a { 
          
	text-decoration: none;
        }
a:hover { 
          
	color: aqua;
	text-decoration: none;
        }

    链接伪类注意事项: 1.lvha顺序 2.因为链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

  • 用于获得光标的表单元素

    input:focus { 
          
            color: aqua;
        }

3. CSS的显示模式

3.1 块元素

常见的块元素:h1~h6,div,p,ul,ol,li等

块元素的特点:

  • 独占一行

  • 可控制高度，宽度，内外边距

  • 宽度默认是容器(父级宽度)的100%

  • 是一个容器及盒子，里面可以放行内或者块级元素

    div { 
          
            width: 300px;
            height: 300px;
            background-color: darkorange;
        }

    : 文字元素不能放块级元素,如p元素不能放div元素。

3.2 行内元素

常见的行内元素有: a, label, b, em, i, del, s, ins, u, span等

行内元素的特点:

  • 相邻行内元素在一行上，可以显示多个

  • 宽、高设直接置是无效的

  • 默认宽度就是它本身内容的宽度

  • 行内元素只能容纳文本或其他行内元素

    label { 
          
            background-color: blueviolet;
        }

span { 
          
            background-color: orangered;
        }

    1.链接里面不能再放链接 2.特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

3.3 行内块元素

常见行内块元素: input, img, td, textarea

同时具有块元素和行内元素的特点

行内块元素的特点:

  • 和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可显示多个

  • 默认宽度就是它本身容器的宽度

  • 宽度，行高，内外边距都可以设置

      input { 
          
            width: 249px;
            height: 35px;
        }

3.4 显示模式转换

特殊情况下 一个元素的显示模式需要另一种模式的特性时 比如想让<a>触发范围–元素模式转换

  • 转换为块元素: display: block

  • 转换为行内元素: display: inline

  • 转换为行内块元素: display: inline-block

    a { 
          
            width: 300px;
            height: 200px;
            display: block;
        }

4.CSS背景属性

背景属性可以设置背景颜色、背景图片、背景平铺，背景图片位置、背景图像固定等

background: background-color | background-image | background-repeat | background-attachment | background-position

4.1 设置背景颜色

  • background-color: transparent(默认透明) | color

    div { 
          
            background-color: pink;
        }

4.2 设置背景图片

  • background-image: none(默认) | url(url)

    div { 
          
            background-image: url(images/logo.png);
        }

4.3 设置背景平铺

  • background-repeat: repeat | no-repeat | repeat-x | repeat-y

    repeat 平铺(默认) norepeat (不平铺) repeat-x (沿x轴平铺) repeat-y (沿y轴平铺) 可以既有背景颜色又有背景平铺

    div { 
          
            background-repeat: no-repeat;  
        }

4.4 设置背景图片位置

  • background-position: x y

    可以使用方位名词或者精确单位 length 百分数|由浮点数字和单位标识符组成的长度值

  • background-position: top | center | bottom | left |right

    如果指定的两个值都是方位名词，则两个值前后顺序无关 如left top和 top left 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中

    div { 
          
            background-position: left center;
        }

  • background-position: px px

​ 第一个肯定是x坐标，第二个一定是y坐标

​ 如果只指定一个数值，那么数值一定是x坐标，另一个默认垂直居中

div { 
        
            background-position: 100px 10px;
            /* background-position: 100px; 只指定一个值，数值一定是x坐标，y坐标默认为center*/
        }

  • background-position: px 方位名词

    如果指定的两个值是精确单位和方位名词的混合使用，则第一个值是x坐标，第二个值是y坐标

     div { 
          
            background-position: 100px center;
        }

4.5 设置背景图像固定

background-attachment属性设置背景图像是否是固定或者随着页面的其余部分滚动 background-attachment后期可以制作视差滚动效果

  • background-attachment: scroll(默认)|fixed

    scroll 背景图像随对象内容滚动 fixed 背景图像固定

    body { 
          
            background-attachment: fixed;
            /* background-attachment: scroll; 滚动(默认)*/
        }

4.6 背景属性复合写法

background: 背景颜色 背景图像 背景平铺 背景图像滚动 背景图片位置

一般按照此约定的顺序

body { 
        
            /* 背景属性复合写法 */
            background: pink url(images/bg.jpg) no-repeat fixed top;

        }

4.7 背景半透明

CSS3为我们提供了背景颜色半透明的效果

div { 
        
           background: rgba(0, 0, 0, 0.2);      
        }

最后一个参数是alpah透明

标签： 1000w100rj电阻

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台