前端知识补充—CSS

CSS介绍

什么是CSS

CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式

CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离

基本语法规范

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

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

2）声明决定修改什么. (⼲啥)

3）声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值

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

style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内

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

引入方式

CSS有3种引⼊⽅式，语法如下表格所⽰：

引入方式	语法描述	示例
行内样式	在标签内使⽤style属性， 属性值是css属性键值对	<div style="color:red">红色</div>
内部样式	定义<style>标签， 在标签内部定义css样式	<style>h1{             }</style>
外部样式	定义<link>标签， 通过href属性引⼊外部css⽂件	<link rel="stylesheet" href="CSS文件目录">

3种引⼊⽅式对⽐:

1. 内部样式会出现⼤量的代码冗余, 不⽅便后期的维护，所以不常⽤. (此处使用这种方式)

2. ⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式

3. 外部样式，html和css实现了完全的分离, 企业开发常⽤⽅式

规范 

样式⼤⼩写

虽然 CSS 不区分⼤⼩写, 我们开发时统⼀使⽤⼩写字⺟

空格规范

冒号后⾯带空格

选择器和 { 之间也有⼀个空格

CSS选择器

CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性

CSS选择器主要分以下⼏种:

1）标签选择器  通过标签来选择

2）类选择器  通过class来选择（.class）

3）ID选择器  通过ID来选择（#ID）

4）复合选择器  对元素进行分类，通过class来标识类名

5）通用选择器 （通配符选择器） 对元素进行起名，通过ID来标识（ID不能重复）

     

     

    <style>

         div{

            color:red;

        }                                     //标签选择器

        .center{

            color:red;

        }                                    //类选择器

        #test{

            color:red;

        }                                   //ID选择器

    </style>

        <div>已有账号？</div>

        <sapn class="center">已有账号？</span>

        <span class="center" id="test">已有账号？</sapn>span>

复合选择器——>有多个单选择器组成，选择器之间，使用  空格  隔开

        .order li{

            color:red;

        }

       

    <ol class="order">

        <li style=" color:blue;">1111</li>

        <li>2222</li>

        <li>3333</li>

    </ol>

 通配符选择器

/* 设置⻚⾯所有元素 , 颜⾊为红⾊ */

* {

        color : red;

   }

注意：

1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选

择器的组合, 也可以是任意数量选择器的组合

2. 不⼀定是相邻的标签, 也可以是"孙⼦"标签

3. 如果需要选择多种标签, 可以使⽤ , 分割, 如 p, div { } 表⽰同时选中p标签和div标签.

逗号前后可以是以上任意选择器, 也可以是选择器的组合

常见的CSS样式

接下来学习⼀些常⻅的css样式

准备如下html

< div class = "text" > 我是⽂本 </ div >

1）color: 设置字体颜⾊ 

颜⾊有如下⼏种表达⽅式:

       1. 英⽂单词,如red,blue

       2. rgb代码的颜⾊ 如rgb(255,0,0)

       3. ⼗六进制的颜⾊ 如#ff00ff

        .text{

            color:red;

        }

 2）font-size: 设置字体⼤⼩

        .text{

            color:red;

            font-size: 32px;

        }

3）border: 边框

边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值⾃动判断

      .text{

            color:red;

            font-size: 32px;

            border: 1px solid blue;

        }

分别为边框粗细, 边框样式, 边框颜⾊

       .text{           

            border-width: 1px;

            border-style: solid;

            border-color: purple;

        }                                                        //两处的代码是等价的

4）width / height

width: 设置宽度

height: 设置⾼度

只有块级元素可以设置宽⾼

块级元素是HTML标签的⼀种显示模式, 对应的还有行内元素

常⻅块级元素: h1-h6, p, div 等

常⻅⾏内元素: a span

块级元素独占⼀⾏, 可以设置宽⾼

⾏内元素不独占⼀⾏, 不能设置宽⾼

        .text{

            color:red;

            font-size: 32px;

            border: 1px solid blue;

            width: 200px;

            height: 100px;

        }

5）padding   margin

padding: 内边距, 设置内容和边框之间的距离

margin: 外边距, 设置元素和元素之间的距离

内容默认是顶着边框来放置的. ⽤ padding 来控制这个距离

padding也是⼀个复合样式, 可以对四个⽅向分开设置

——>                  padding-top          padding-bottom         padding-left         padding-righ

margin也是⼀个复合样式, 可以给四个⽅向都加上外边距

——>                   margin-top           margin-bottom            margin-left           ma rgin-right

        .text{

            color:red;

            font-size: 32px;

            border: 1px solid blue;

            width: 200px;

            height: 100px;

            margin: 10px 20px 30px 40px;

        }

       .text{

            color:red;

            font-size: 32px;

            border: 1px solid blue;

            width: 200px;

            height: 100px;

            padding-right: 10px;

            padding-left: 20px;

            margin: 10px 20px 30px 40px;

        }

        html{

            padding: 20px;

        }