2022年css知识点汇总

1、学习好资料 欢迎下载CSS 学习学问点1、 css 是什么？CSS Cascadi ng Style Sheet 可译为 层叠样式表” 或 级联样式表”,它定义如何显示HTML 元素,用于掌握网页的外观；2、 为什么使用 css ,优点是什么？1：【内容】和【表现】相分别 HTML 文件中只存放文本信息,将样式部分放在一个独立样式文件中；页面对搜寻引擎更加友好；2: 提高页面浏览速度采纳 CSS 布局的页面容量要比TABLE 布局的页面文件容量小得多,前者一般只有后者的1/2 大小；3: 易于保护和改版只要简洁的修改对应 CSS 文件,就可以重新设计整个网站的页面；4:使用 CSS 布局更符合

2、现在的 W3C 标准W3C 组织是对网络标准制定的一个非赢利组织,像3、 CSS 样式表的调用方式哪几种？HTML 、CSS 、XML 的标准就是由它来定制；| 1、内部样式：把 CSS 样式表放到 文档中：格式如下： . 2、 内联式：把 CSS 样式表写在 HTML 对应的标记内；格式如下： 蓝色 14 号文字 3、 外部样式： 把编辑好的 CSS 文档储存成“ .CSS ” 文件,然后在 中定义；格式如下： . 4、 导入样式： 与链入外部样式的功能基本相同,只是语法和实现方式上有差别；格式如下： import urlcss.css; 4、 几种调用方式的优先级？从高到低：内联样式外部样

3、式 - 内部样式 - 导入样式学习好资料 欢迎下载5、 CSS 的语法 ：CSS 的定义是由三部分构成：挑选器,属性和属性值；语法：selector property: value; - 挑选符 属性 ：值 举例： body color:#006666;font-size: 18px; 6、css 挑选器分类 1、 类挑选器属性和属性值之间是冒号,多个属性值之间用分号隔开；定义：类挑选器依据类名来挑选,前面以” .来命名口 .democolor:#FF0000;使用方法：在 HTML 中,标记可以定义一个 class 的属性来调用；女口 . 2、 id 挑选器定义：依据元素 ID 来挑选元素,

4、具有唯独性；前面以” #号来标志,如： #democolor:#FF0000; 使用方法：在 HTML 中,标记可以定义一个 id 的属性来调用；女口 . 3、 标签挑选器定义： HTML 页面是有许多不同的标签组成,标签挑选器,就是打算对应标签采纳相应的 CSS 样式；使用方法： p font-size :12px; background:#900; color:090; ,页面里对应的 p 标记全部应用此样式；4、 伪类挑选器 （针对超链接 ）一般伪类都只会被应用在链接的样式上,格式如下：a:linkcolor: #000099; - 带有超链接的文字显示的样式；a:visitedcolo

5、r: #000099; - 拜访过的超链接显示的样式；a:hovercolor: #000099; - 鼠标放在超链接上显示的样式；a:active color: #000099; - 鼠标按下去是超链接显示样式；a color: #000099; - 5、后代挑选器（派生挑选器）标签挑选器 ,链接的颜色；通过依据元素在其位置的上下文关系来定义样式,可以使标记更加简洁；#demo p color:#ff0000; size:14px; 6、 通用挑选器 通用挑选器用 *来表示；例如： *font-size: 12px; 表示全部的元素的字体大小都是 12px；7、 并集挑选器（群组挑选器）当几

6、个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔；比如： p, td, li line-height :20px; 学习好资料欢迎下载color:#ff0000; 7、常用 CSS 缩写语法在网页设计中使用css 缩写可以帮忙削减你CSS 文件的大小,更加简洁阅读；css 缩写的主要规章如下: 、颜色16 进制的颜色值,假如每两位的值相同,可以缩写一半,例如： #000000 可以缩写为 #000;#336699 可以缩写为 #369; 二、 盒尺寸通常有下面四种书写方法：property:value1; 表示全部边都是一个值 valuel ；property:value1 va

7、lue2; 表示 top 和 bottom 的值是 value1,right 和 left 的值是 value2 property:value1 value2 value3; 表示 top 的值是 value1, right 和 left 的值是 value2, bottom 的值是 value3 property:value1 value2 value3 value4; 四个值依次表示 top,right,bottom,left 便利的记忆方法是顺时针：上、右、下、左；详细应用在 margin 禾口 padding 的例子如下：margin:1px 0 2px 5px; 三、 边框 （bor

8、der ）边框的属性如下：border-width:1px; - 边框宽度border-style:solid; - 边框样式（实线,虚线等）border-color:#000; - 边框颜色可以缩写为一句： border:1px solid #000;（属性值没有次序；）四、背景 Backgrounds背景的属性如下：backgro un d-color:#f00; - 背景颜色backgro un d-image:urlbackgro un d.gif; - 背景图片background-repeat:no-repeat; - 背景图片是否重复background-attachment:f

9、ixed;- 背景图片是否固定backgro un d-positi on:0 0; - 背景图片位置可以缩写为一句：backgrou nd:#f00 urlbackgrou nd.gif no-repeat fixed 0 0; 语法是：backgro un d:color image repeat attachme nt positi on; 学习好资料 欢迎下载你可以省略其中一个或多个属性值,假如省略,该属性值将用浏览器默认值默认值为：color: tran spare nt , image: none , repeat: repeat, attachme nt: scroll, pos

10、iti on: 0% 0% 五、字体 fonts字体的属性如下：fon t-style:italic; 字体风格（斜体,正常体等）font-weight :bold; - 字体的粗细font-size :1em; - 字体的大小line-height :140%; - 字体的行距font-family :Lucida Grande,sans-serif; - 字体系列 宋体,楷体等 可以缩写为一句： fon t:italic small-c aps bold 1em/140% Lucida Gran de,sa ns-serif; 留意,假如你缩写字体定义,至少要定义 font-size 和

11、font-family 两个值；六、列表 listslist 的属性如下 ：list-style-type:square; none 代表什么都没有 list-style-positi on:i nside; list-style-image:urlimage.gif; 可以缩写为一句：list-style:square in side urlimage.gif; 取消默认的圆点和序号可以这样写 list-style:non e;, CSS 留意事项：1、 假如属性值是如干单词,就要给值加上引号；比如： pfont-family:Georgia, sans serif,Palatino; 2、 CSS 语法里不分大小写,但是元素在调用id 和 class 是区分大小写的；比如： #dividcolor:#FFFFOO; size:20px;,调用时应写成id=divid ,不能写id=DIVID class 也一样；3、 养成写完每个属性值后加上“；” 号的好习惯；比如： body color:#006666; fon t-size:18px; 4、 ID 挑选器只能在 html 文档中显现一次；学习好资料 欢迎下载在现代布局中, id 挑选器经常用于建立派