CSS基础

css又叫做层叠样式表 

css的作用是什么？

        给页面中的HTML标签设置样式

css的语法规则：

        css写在style标签中，style标签一般写在head标签中，title标签下面

常见属性：

        color：文字颜色

        font-size:字体大小

        background-color：背景颜色

        width：宽度

        height：高度

 

注：：css标点符号都是英文状态下的！！

            每一个样式键值对写完之后，最后需要写分号

 css引入方式：

        1、内嵌式：css写在style标签中，用于当前页面

        2、外联式：css写在单独的.css文件中，通过link标签引入，用于多个页面

        3、行内式、css写在标签的style属性中，用于当前标签

css的基础选择器：

        1、标签选择器

                结构：标签名   {css属性名：属性值；}

                作用：通过标签名，找到页面中所有这类标签，设置样式

        2、类选择器

                结构：.类名   {css属性名：属性值；}

                作用：通过类名，找到页面中所有带这个类名的标签，设置样式

        3、id选择器

                结构：#id属性值   {css属性名：属性值；}

                作用：通过id属性值，找到页面中所有带这个id属性值的标签，设置样式

        类与id的区别：

                 class类名与id属性值的区别

                         class类名相当于姓名，可以重复，一个标签可以同时有多个class类名

                         id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

                类选择器与id选择器的区别

                        类选择器以 . 开头

                        id选择器以 # 开头

                实际开发的情况

                        类选择器用的最多

                        id一般配合js使用，除非特殊情况，否则不要使用id设置样式

                        实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）

        4、通配符选择器

                结构：*{css属性名：属性值；}

                作用：找到页面中所有的标签，设置样式

选择器的作用：

        选择页面中相应的标签（找），方便后续设置样式（改）

字体和文本样式：

        1、字体样式

                1）字体大小：font-size

                        取值：数字+px

                2）字体粗细：font-weight

                        取值：

                3）字体样式：font-style

                        取值：正常（默认值）：normal

                                    倾斜：italic

                4）字体类型：font-family

                        常见取值：具体字体1，具体字体2，具体字体3，具体字体4，...,字体系列

                        具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……

                        字体系列：sans-serif、serif、monospace等……

                        渲染规则：

                                1、从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体

                                 2、如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

                        注意点：

                                1、如果字体名称中存在多个单词，推荐使用引号包裹

                                2、最后一项字体系列不需要引号包裹

                                3、网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

                5）字体类型：font属性连写

                        属性名：font（复合属性）

                        取值：font：style weight  size  family；

                        注意点：

                                如果需要同时设置单独和连写形式

                                1、要么把单独的样式写在连写的下面

                                2、要么把单独的样式写在连写的里面

        2、文本样式

                1）文本缩进：text-indent

                        属性名：text-indent

                        取值：

                                1）数字+px

                                2)数字+em（推荐：1em=当前标签的font-size的大小）

                2）文本水平对齐方式：text-align

                        属性名：text-align

                        取值：

                        text-align：center能让哪些元素水平居中？

                                文本、span标签、a标签、input标签、img标签 

                3)文本修饰：text-decoration

                        属性名：text-decoration

                        取值：

        3、line-height行高 

                        属性名：line-height

                        取值：1、数字+px

                                   2、倍数（当前标签font-size的倍数）

                        应用：

                                1、让单行文本垂直居中可以设置 line-height : 文字父元素高度

                                2、网页精准布局时，会设置 line-height : 1 可以取消上下间距

                        行高与font连写的注意点：

                                1、如果同时设置了行高和font连写，注意覆盖问题

                                2、font : style weight size/line-height family ;

Chrome调试工具：

        打开方式：1）右击-检查    2）看哪里

        控制样式：1）修改属性值   2）添加属性   3）控制样式生效

        特殊情况：1）出现删除线   2）出现小三角形

字体和文本样式属性值：

 

颜色取值类型：

        1、关键词

        2、rgb表示法

        3、rgba表示法

        4、十六进制表示法 

                取值范围：两个数字为一组，每个数字的取值范围：0~9 , a , b , c , d , e , f

css选择器进阶：

        1、复合选择器

                1）后代选择器：空格

                        作用：根据HTML标签的嵌套关系，选择父元素后代中的满足条件的元素

                        注意：：1、后代包括：儿子、孙子、重孙子........

                                        2、后代选择器中，选择器与选择器之间通过空格隔开 

                2）子代选择器：>

                        作用：根据HTML标签的嵌套关系，选择父元素子代中的满足条件的元素

                         

                        注意：：1、子代只包括：儿子

                                        2、子代选择器中，选择器与选择器之间通过>隔开

        2、并集选择器：，

                作用：同时选择多组标签，设置相同的样式

                注意：：1、并集选择器中的每组选择器之间通过 , 分隔

                                2、并集选择器中的每组选择器可以是基础选择器或者复合选择器

                                3、并集选择器中的每组选择器通常一行写一个，提高代码的可读性

        3、交集选择器：紧挨着

                作用：选中页面中 同时满足 多个选择器的标签

                注意：：1、交集选择器中的选择器之间是紧挨着的，没有东西分隔

                                2、交集选择器中如果有标签选择器，标签选择器必须写在最前面

        4、hover伪类选择器

                作用：选中鼠标悬停在元素上的状态，设置样式

                注意：：伪类选择器选中的元素的某种状态

        5、Emmet语法 

                作用：通过简写语法，快速生成代码

                

总结： 

 背景相关属性：

        1、背景颜色

                属性名：background-color(bgc)

                注意：：1、背景颜色默认值是透明： rgba(0,0,0,0) 、transparent

                               2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

        2、背景图片

                属性名：background-image（bgi）

                属性值：

                注意：：1、背景图片中url中可以省略引号

                                2、背景图片默认是在水平和垂直方向平铺的

                                3、背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

        3、背景平铺

                属性名：background-repeat(bgr)

                属性值：

        4、背景位置

                属性名：background-position(bgp)

                属性值：

                 

                注意：： 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

        5、背景相关属性连写

                属性名：background（bg）

                属性值：单个属性值的合写，取值之间以空格隔开

                注意：： 如果需要设置单独的样式和连写

                                ① 要么把单独的样式写在连写的下面

                                ② 要么把单独的样式写在连写的里面

元素显示模式：

        1、块级元素

                显示特点：

                        1） 独占一行（一行只能显示一个）

                        2）宽度默认是父元素的宽度，高度默认由内容撑开

                        3）可以设置宽高

                代表标签： div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

        2、行内元素

                显示特点：

                        1）一行可以显示多个

                        2）宽度和高度默认由内容撑开

                        3）不可以设置宽高

                代表标签： a、span 、b、u、i、s、strong、ins、em、del……

        3、行内块元素

                显示特点：

                        1)一行可以显示多个

                        2)可以设置宽高

                代表标签： input、textarea、button、select……

                                   特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

        4、元素显示模式转换

                目的：改变元素默认的显示特点，让元素符合布局要求

                语法：

 HTML嵌套规范注意点

        1、块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……                 但是：p标签中不要嵌套div、p、h等块级元素

        2、a标签内部可以嵌套任意元素

                但是：a标签不能嵌套a标签

居中方法总结：

 

CSS特性：

        1、继承性

                特性：子元素有默认继承父元素样式的特点（子承父业）

                注意：： 可以通过调试工具判断样式是否可以继承

                可以继承的常见属性(文字控制属性都可以继承 ）：

                        1）color

                        2）font-style、font-weight、font-size、font-family

                        3）text-indent、text-align

                        4）line-height

                好处：可以在一定程度上减少代码

                常见应用场景：

                        1、可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式

                         2、直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

                继承失效的特殊情况

                        如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

                        1、a标签的color会继承失效

                                其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

                         2、h系列标签的font-size会继承失效

                                其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

        2、层叠性 

                特性：

                        1）给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上

                        2）给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

                注意：：：

                        当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果