A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 鱼丸儿 于 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!importantCSS中的作用
        它主要是用来提升属性的权重。其属性的权重值无穷大
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简介及标签

29 个回复

倒序浏览
内容很详细,对初学者很有帮助。
回复 使用道具 举报
顶顶顶顶顶
回复 使用道具 举报
厉害了!特有用
回复 使用道具 举报
gy_yt 来自手机 中级黑马 2017-11-21 11:23:06
报纸
看的很清晰很有用,
回复 使用道具 举报
张艺凡老师 来自手机 中级黑马 2017-11-21 11:23:27
地板
厉害啦,很用心
回复 使用道具 举报
很有用很有用
回复 使用道具 举报
nhm 中级黑马 2017-11-21 11:24:08
8#
很厉害很厉害
回复 使用道具 举报
采姑娘的小蘑菇 来自手机 中级黑马 2017-11-21 11:24:23
9#
超级厉害
回复 使用道具 举报
cj1234 中级黑马 2017-11-21 11:25:37
10#
厉害死了
回复 使用道具 举报
秋子菇凉 来自手机 中级黑马 2017-11-21 11:25:41
11#
不明觉厉!
回复 使用道具 举报
PHP老曹 来自手机 高级黑马 2017-11-21 11:28:17
12#
不行了,万一以后再也看不到了怎么办
回复 使用道具 举报
咸鱼666 来自手机 中级黑马 2017-11-21 11:31:42
13#
666666666666
回复 使用道具 举报
小核桃仁 来自手机 中级黑马 2017-11-21 11:38:16
14#
棒棒哒
回复 使用道具 举报
慧-wh 来自手机 中级黑马 2017-11-21 11:38:50
15#
厉害,666666
回复 使用道具 举报
厉害啊66666666
回复 使用道具 举报
杭州宋小妞 来自手机 初级黑马 2017-11-21 11:43:38
17#
一大波6666666666
回复 使用道具 举报
黑马6666 来自手机 初级黑马 2017-11-21 11:55:37
18#
好非常有收获顶顶顶
回复 使用道具 举报
程代明 来自手机 中级黑马 2017-11-21 13:26:18
19#
完美 赞
回复 使用道具 举报
fanbuer 来自手机 中级黑马 2017-11-21 13:28:47
20#
666666666……
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 加入黑马