CSS基础

目录

一，CSS是什么？

二，HTML如何关联CSS？

三，认识选择器

四，样式应用覆盖问题

五，css中常见的一些数值

六，CSS常见属性

七，盒模型

---

一，CSS是什么？

CSS即Cascade Style Sheet（层叠样式表），能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离

CSS是一门独立的语言，是一种声明式语言（类似于SQL语言），只声明结果，不管过程，其主要针对哪些元素给定哪些样式

二，HTML如何关联CSS？

1，内部样式：通过一个HTML标签<style>…CSS语法的内容…</style>

2，外部样式（实际开发中最常用的样式）：把CSS专门写到另外的资源（css文件中），通过<link>来引入

          

        这里的rel是固定的，href是CSS文件路径

3，内联样式：直接放在元素的style属性中，不需要跟选择器

        

三，认识选择器

1，元素选择器

        选择指定的元素，比如选择body元素： body {…}，选择所有的div元素： div {…}

2，id选择器

        通过一个元素的id，选择某个元素，格式为：#id{…}

3，类选择器

        通过一个指定的类别，选择某批元素，格式为：.+类名{…}

以上三个选择器是最基本也是最重要的

4，通配符选择器

        所有的元素都遵守该号令，一般设置一些页面的基础样式，例如字体大小、颜色、模型布局等，格式为：* { …}

5，组合选择器

        把元素选择器和类选择器组合在一起，如：div.hello {…}——所有class中有hello的div元素听我号令

        再如：div.hello.world{…}——所有class中既有hello，又有world的div元素听我号令

                div#hello{…}——所有id是hello的div元素听我号令

6，并集选择器

        用于一次选择多种元素（并列关系），格式为：元素1, 元素2 { 样式声明 }

        通过逗号分割多个元素，表示同时选中元素 1 和 元素 2

        任何基础选择器都可以使用并集选择器

        并集选择器建议竖着写，每个选择器占一行(最后一个选择器不能加逗号)

        如 p,#hello,.world{…}——所有的p标签和所有的id是hello的标签和所有的class中有world的标签都听我号令

        可以实现一批无法直接并列的选择器的设置方式

7，子孙后代选择器

        又叫包含选择器. 选择某个父元素中的某个子元素，格式为：元素1 元素2 {样式声明}

        元素 1 和 元素 2 要使用空格分割

        元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

8，直系孩子选择器

        和后代选择器类似, 但是只能选择子标签，格式为：元素1>元素2 { 样式声明 }

        使用大于号分割，注意这里只选亲儿子, 不选孙子元素

注意区分这三种关系：并列，子孙，孩子！

9，伪类选择器

        1）链接伪类选择器：

        关于a标签的几种状态：

        a:link 选择未被访问过的链接

        a:visited 选择已经被访问过的链接

        a:hover 选择鼠标指针悬停上的链接

        a:active 选择活动链接(鼠标按下了但是未弹起)

        如：

        

        2）focus伪类选择器：

        某个元素获得焦点时（1，鼠标点击该元素；2，通过tab切换焦点），该选择器生效

        如：

        此时被选中的表单的字体就会变成红色

四，样式应用覆盖问题

1，越精确的选择器，它的样式优先级越高（会覆盖不精确的）

        精确度的级别：#id > .class > 元素，同时注意：内联的方式优先级最高，大于内部和外部的，因为内联是指定到具体元素上的

2，同等优先级的情况下，写在下面的会覆盖写在上面的

3，某些样式，自动带有继承功能，设置其父元素的样式，该元素的所有子孙默认都按该样式处理

五，css中常见的一些数值

1，长度（宽、高）：

        绝对值：10px

        相对值：2em；相当于当前字体的两倍（字体设置常见）

        百分比：100%；一般是相对其父元素（相对的基准点是可以设置的）

2，关于颜色：        

        rgb（红，绿，蓝）

        rgba 0-100  完全透明-完全不透明

        hsl（色调，饱和度，亮度）

        

六，CSS常见属性

1，字体相关

        font-family：字体，可以设置多个候选，如果字体中有空格，可以用引号引起

        font-size：字体大小

        ……

2，文字颜色：

        color：预定义的颜色值(直接是单词) / [最常用] 十六进制形式  /  RGB 方式

3，文本对齐：

        text-align：left / center / right

4，文本装饰：

        text-decoration：

                underline 下划线. [常用]

                none 啥都没有，可以给 a 标签去掉下划线

                overline 上划线. [不常用]

                line-through 删除线 [不常用]

5，文本缩进：

        text-indent：

                单位可以使用 px 或者 em，使用 em 作为单位更好，1 个 em 就是当前元素的文字

        大小， 缩进可以是负的, 表示往左缩进 (会导致文字就冒出去了)

6，行高：

        line-height: [值]

        行高指的是上下文本行之间的基线距离

        行高等与元素高度, 就可以实现文字垂直居中对齐

7，背景

        背景颜色：background-color: [指定颜色]；

        背景图片：background-image: url(...);

        背景平铺：background-repeat: [平铺方式]

                repeat: 平铺      no-repeat: 不平铺      repeat-x: 水平平铺     repeat-y: 垂直平铺

        背景位置：background-position: x y;

        背景尺寸：background-size: length|percentage|cover|contain;

        ……

8，关于矩形的设置：

        1）圆角设置

                通过 border-radius 使边框带圆角效果，用法：border-radius: length;

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

        2）边框显示

                border-top | bottom | left | right：

        3）阴影显示

                box-shadow :

七，盒模型

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

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

        

        1） 默认情况下指定宽高是指定content部分的宽高

                真正的可视大小：（border+padding+content）

                真正的占用空间大小：（margin+border+padding+content）

        注意：两个盒子之间的margin不是取margin之和，而是max（margin）

       2） 边框会撑大盒子，当盒子中有内容时，可能把比宽高撑到超过我们指定的宽高，此时我们可以通过box-sizing控制计算宽高，有以下两种方式：

                content-box：（默认情况）宽高指定的是content区域

                border-box：宽高指定的是border+padding+content区域

        3）块级元素（block）和内联元素（inline）

                块级元素必须独占一行（自带换行），如h1、p、div、form…，而内联元素不带换行，如span、strong、em、a、input、button…

                我们可以通过display修改元素的默认类型：

                        display: block；修改为块级元素；

                        display: inline；修改为内联元素；

                        display: inline-block 改成行内块元素（也就是不换行，但可以指定宽高，内外

                间距，边框等）

        4）外间距，内间距，边框都可以分别从top,bottom,left,right指定不同的参数

        5）去掉浏览器默认样式

                使用通配符选择器即可完成这件事情.

                    

         6）块级元素水平居中

                把水平 margin 设为 auto，以下三种写法都可以：

                

         7）弹性布局

                display: flex;

                我们利用弹性布局主要实现两个目的：1，列表元素的展示；2，单一元素的水平，垂

        直居中