黑马程序员技术交流社区
标题: 【黑马程序员杭州】PHP课程笔记day06-CSS样式 [打印本页]
作者: 鱼丸儿 时间: 2017-11-21 10:06
标题: 【黑马程序员杭州】PHP课程笔记day06-CSS样式
本帖最后由 鱼丸儿 于 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简介及标签
作者: swallow25715902 时间: 2017-11-21 11:21
内容很详细，对初学者很有帮助。
作者: 许言 时间: 2017-11-21 11:21
顶顶顶顶顶
作者: 阿布乙 时间: 2017-11-21 11:22
厉害了！特有用
作者: gy_yt 时间: 2017-11-21 11:23
看的很清晰很有用，
作者: 张艺凡老师 时间: 2017-11-21 11:23
厉害啦，很用心
作者: nhm 时间: 2017-11-21 11:24
很厉害很厉害
作者: 小年青 时间: 2017-11-21 11:24
很有用很有用
作者: 采姑娘的小蘑菇 时间: 2017-11-21 11:24
超级厉害
作者: cj1234 时间: 2017-11-21 11:25
厉害死了
作者: 秋子菇凉 时间: 2017-11-21 11:25
不明觉厉！
作者: PHP老曹 时间: 2017-11-21 11:28
不行了，万一以后再也看不到了怎么办
作者: 咸鱼666 时间: 2017-11-21 11:31
666666666666
作者: 小核桃仁 时间: 2017-11-21 11:38
棒棒哒
作者: 慧-wh 时间: 2017-11-21 11:38
厉害，666666
作者: fangmifang618 时间: 2017-11-21 11:40
厉害啊66666666
作者: 杭州宋小妞 时间: 2017-11-21 11:43
一大波6666666666
作者: 黑马6666 时间: 2017-11-21 11:55
好非常有收获顶顶顶
作者: 程代明 时间: 2017-11-21 13:26
完美 赞
作者: fanbuer 时间: 2017-11-21 13:28
666666666……
作者: 刘华莎 时间: 2017-11-21 13:29
棒棒哒
作者: zhangting2017 时间: 2017-11-21 13:42
很详细，受益匪浅·······
作者: 猫先森 时间: 2017-11-21 14:30
现在都学习到第六天了！帮助很大
作者: yuxiaoyi 时间: 2017-11-21 15:25
很期待下一篇
作者: Rocket_冷风 时间: 2017-11-21 15:51
很好，适合初学者了解学习
作者: 鱼丸儿 时间: 2017-11-21 16:31
为初学者答疑解惑，是我们做技术分享的初衷
作者: 鱼丸儿 时间: 2017-11-21 16:32
旋转跳跃我闭着眼٩(๑❛ᴗ❛๑)۶
作者: patronli 时间: 2017-11-22 09:32
哇哇哇！我现在挣缺这一份资料，好全面啊
作者: 奔跑地小少女 时间: 2017-11-22 14:12
谢谢分享哦
作者: 雷米 时间: 2017-11-22 16:54
感谢楼主无私分享！
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |