本帖最后由 鱼丸儿 于 2017-11-21 16:04 编辑
一、文本与字体属性
1.1文本属性
1.2字体属性
1.3文本与字体属性综合案例
二、列表样式属性
这里的列表指的是:无序列表和有序列表
因为在整个网页布局中无序列表是使用的最多的。
list-style-image:将列表前面的项目符号设置为一张图片 它的值是:url(图片的地址)
list-style:这个属性是一个简写属性 它集成了上面三个属性的功能。可以同时设置上面的三个属性。每一个属性值之前使用空格分隔! 它的属性值可以有一个也可以有两个也可以三个。其属性值个数不定,位置也不定!
三、列表样式属性案例
CSS代码:
HTML代码:
效果图:
四、继承性特点: 1、外层元素身上的样式会被内层元素所继承。
2、如果内层元素与外层元素身上的样式相同时,外层元素的样式会被内层元素所覆盖。
问:是不是所有的样式都能够被继承呢? 答:并不是所有的样式都能够被继承。只有文本与字体样式属性能够被继承。其它的样式属性都不可以被继承。
注意:
在实际工作中,我们往往会给body标签设置字体大小以及字体颜色。因为body标签是最外层的元素,内层的元素会继承外层的元素的样式。 五、优先级行内样式>ID选择器>类选择器>标签选择器 一般而言,选择器指向的越准确,优先级就会越高。通常我们会用1来表示标签选择器的优先级,用10来表示类选择器的优先级,用100来表示ID选择器的优先级,用1000来表示行内样式。
标签选择器 1 类选择器 10 ID选择器 100 行内样式 1000
值越大表示其优先级越高。 不管是单个选择器还是多个选择器组合它们之前的优先级都可以通过上面这个公式来进行计算。我们将其值称之为权重值。权重值越大就表示其优先级越高。 六、!important属性
6.1什么是important important在英文中含义是“重要的”意思 6.2!important在CSS中的作用 它主要是用来提升属性的权重。其属性的权重值无穷大 6.3语法格式属性:值 !important;
一定要注意!important的语法规则: 正确的写法 属性:值 !important; 错误的写法 属性:值;!important; 不能将!important写在分号的外面 一定要写在分号的里面 属性:值 important; 不能将!给忘记了。
使用!important一定要注意以下几点: 1、!important它是提升的属性的权重,而不是提升选择器的权重! 上图的效果:文本的颜色是听加了!important的属性,文本的大小是听ID选择器的 因为!important它只提升了属性的权重并没有提升选择器的优先级。 2、!important它不能提升继承过来的权重!
七、一个标签内可以携带多个类名类名:指的是class的属性值 一个标签内可以携带多个类名,指的是class的属性值可以有多个,每一个属性值之间使用空格分隔。 举例: <标签名 class=”值1 值2 值3”></标签名>
多个类名的优点: 1. 减少CSS的代码量 2. 多个类名的样式会叠加到当前元素上面
注意: 如果说一个标签内的多个类名,它们设置的样式是一样的话,就会存在样式的冲突! 八、背景样式属性
注意: background-color:用于给元素设置背景颜色 但是前提这个元素要么有内容,要么有宽度和高度才可以 background-image 用于给元素设置背景图片 图片的地址一定放在url(图片的地址) 但是前提这个元素要么有内容,要么有宽度和高度才可以 背景图片默认是平铺的
background-repeat是用于设置背景图片是否平铺 repeat(是平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺)、no-repeat(不平铺)
background-position 用于设置背景图片的位置 如果要设置背景图片的位置 这个属性就会有两个值 background-position:水平位置 垂直位置 这两个位置的表示方式有三种 英文单词固定值 百分比 这三种方式可以混合使用可以同时使用英文单词或者是固定值或者是百分比 英文单词的表示方式 水平位置:left(居左)、center(居中)、right(居右) 垂直位置:top(居上)、center(居中)、bottom(居下) 固定值的表示方式 百分比的表示方式
background:简写属性 它可以同时设置多个样式 比如背景颜色、背景图片、背景图片是否平铺 水平位置 垂直位置 background:简写属性 其值的个数不定 顺序也不定 每一个值之前使用空格分隔
九、背景样式属性综合案例
阅读推荐
【黑马程序员杭州】PHP课程笔记day01-HTML简介及标签 |