css笔记 概述

目录

01 css样式的大致分类

02 css颜色设置的方式

03 font字体设置以及font的连写

04 css的书写位置

05 css的选择器

06 css元素的分类及显示模式的转换

07 css的三大特性

---

01 css样式的大致分类

        1.尺寸类: 宽高   边框   内边距

        2.外观类: 文本(字体大小 字体 字体样式)   背景(背景颜色 背景图片 背景图片定位 大小...)

        3.位置类: 外边距   定位    浮动

        4.其他样式

02 css颜色设置的方式

        1.颜色单词 red  blue pink

        2.rgb(0~255,0~255,0~255)三原色 红绿蓝 红色： rgb(255,0,0)

        3.#十六进制颜色设置   红色：#f00  #ff0000    绿色：#0f0   蓝色：#00f

        4.rgba(0~255,0~255,0~255,0~1) 设置当前颜色是否为透明  0表示透明 1表示不透明

03 font字体设置以及font的连写

font:

        字体加粗: font-weight :100~900 没有单位 100~500不加粗 600~900加粗

        字体大小: font-size: px  有单位     (浏览器默认的字体大小是16px)

        字体倾斜: font-style:normal(默认值)|italic(倾斜)

        字体: font-family: 字体名称 字体可以写中文名称,也可以写英文名称 

        (谷歌浏览器默认的字体是微软雅黑)

font连写： font:weight style size family  (font连写中必须要写的属性是 size 和 family )

04 css的书写位置

css的引入方式:

        1.内嵌式(开发中不用讲课中常用)

                在当前html文件中 head标签内部 定义style标签 在style标签内定义css代码

                内嵌式没有真正的实现样式与结构的分离 

        2 行内式(不建议使用)

                标签都有一个通用的属性 style属性  style="css代码"

                只能针对当前标签生效   没有实现结构和样式的分离

        3 外链式(实际开发中必须用)

                单独定义.css文件

                在css文件里面  直接写css代码(不需要style标签了)

                需要在当前html的head标签里面  通过link引入这个css文件

                真正的实现了 样式和结构分离

05 css的选择器

css选择器分为基本选择器和复合选择器

基本选择器包括:

        1.标签选择器：就是使用标签名来作为选择器的名字

        2.类选择器：使用class属性定义的，使用.class属性值作为选择器的名字

                一个标签可以有多个类选择器，一个类选择器也可以作用在多个标签上

        3.ID选择器：使用id属性定义的 ，使用#id值作为选择器的名字 

                一个标签只能有一个id选择器 ，一个id选择器也只能作用在一个标签上

        4.通配符选择器：使用 * 来作为选择器的名字

                使用通配符选择器设置的样式会作用在所有的标签上面

复合选择器包括：

        1.后代选择器：后代选择器使用空格隔开(选择的是子孙后代标签)

                例：div p 表示p标签是属于div标签里面的

        2.子代选择器： 使用 符号 > 来隔开 (只能选择自己的子元素标签)

        3.并集选择器：使用符号逗号 , 来隔开

        4.交集选择器：选择器之间不需要用符号来隔开（表示既是...又是...） 

06 css元素的分类及显示模式的转换

在css中把页面标签(元素)分为三种类型：

        1.块级元素：p h1~h6 ul>li ol>li dl>dt dd html body div form

                特点： 独占一行 可以设置宽高

        2.行内元素： span a i/em u/ins b/strong s/del

                 特点：在一行显示不可以设置宽高

        3.行内块元素：input img

                特点： 在一行显示并且可以设置宽高

css显示模块的转换

        1.display:block(转换为块级元素)

        2.display:inline(转换为行内元素)

        3.display:inline-block(转换为行内块元素)

07 css的三大特性

        1.层叠性：就是把给标签设置的所有样式都叠加起来 所以叫做层叠性

        2.继承性：一部分样式设置给父元素的同时 子元素也会生效该样式，这就是css的继承性

                哪些属性会被继承：关于文本设置的属性会被继承 color和 font会  其他的不会被继承

                css继承性的需要注意的点：

                        1.h系列标签不要继承字体大小

                                否则会变的比继承的字体要大，因为h系列标签的默认字体单位是em，

                                是按照父元素字体大小来确定的 ，所以会变大。

                        2.a标签不会继承字体颜色

                                因为a标签的字体颜色是由多个伪类选择器来设置的

                                所以想要改变a标签的文字颜色 需要选择器直接选择到a标签

        3.优先级(权重性)：

                给标签设置样式时，可能会出现不同类型的选择器去给同一个标签设置

                相同属性，只是属性值不同的情况下则会使用到css的优先级特性。

                选择器优先级高的会被使用。

                选择器的优先级排序：

                        继承<标签选择器<类选择器<id选择器<行内样式<!important