资讯详情

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选择器,CSSid选择器以#来定义

  • 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-sizefont-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 toptop 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百科大全!

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