王老师html零基础学习笔记第5课——css初级选择器+背景

原创 老王  2020-05-04 14:54:01  阅读 568 次 评论 0 条
摘要:

前端第五次课开始学习css样式,先简单的了解背景和选择器的使用

css选择器初级和背景

html命名规范

HTML命名规范: 名字尽量用英文小写字母 可以包含字母,数字,中短线( - ),下划线( _ ) 有意义的命名(见名知意) 企业命名规范: 拓展: 驼峰命名:第一个单词小写,第二单词首字母大写例:imgList

CSS初级选择器

一、通配符选择器 二、元素选择器 三、id选择器 四、class类选择器 五、ID选择器与Class选择器的区别 六、包含(后代)选择器

ID选择器,元素以ID进行命名

#info{width:200px;height:100px; background:red;}

类选择器 class选择器,以class="名字"  进行命名

例:

.txt{font-size:12px;}

ID选择器与Class选择器的区别

  区别 1:ID选择器只能在文档中使用一次,class类选择器可以多次使用。       区别 2:ID的权重大于class类的权重

后代(包含)选择器

div   ul  li{list-style:none;}

background背景样式

background是简写属性,在一个声明中设置所有的背景属性:

1.background-color:规定要使用的背景颜色 2.background-image:把图像设为背景图片 3.background-size:改变背景图片大小 4.background-repeat:规定如何重复背景图片 5.background-position:规定背景图片位置 6.background-attachment:背景关联 7.background:综合样式控制

background-color 背景颜色

十六进制值       #CC0066    #000 英文单词里颜色值  red  gray blue yellow Rgba 表达法     (css3)

background-image 添加背景图片

url("地址")  引用背景图片的地址   none  不使用背景图片

background-repeat  背景重复

repeat:   默认。 背景图像在水平和垂直方向均重复 repeat-x:       背景图片在水平方向重复 repeat-y:       背景图片在垂直方向重复 no-repeat:      背景图片只显示一次,不重复

background-position 规定背景图像位置

① 使用关键字:top、bottom、left、right 和 center两两组合而成           ps:如果只出现一个关键字,则认为另一个关键字是 center王老师html零基础学习笔记第5课——css初级选择器+背景  html 前端 CSS3样式 笔记 第1张

background-position 规定背景图像位置

②. 数字表达:一个对应水平方向,另一个对应垂直方向 1)百分数值  (水平%   竖直%)    background-position:20% 30%; ps:如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为50% 2)具体的值  (水平px   竖直px)   background-position:20px 30px;

background-attachment背景关联

王老师html零基础学习笔记第5课——css初级选择器+背景  html 前端 CSS3样式 笔记 第2张

background 综合样式控制

background: url("")   no-repeat   2px  5px;  (路径 背景颜色 重复 位置;)

本文地址:http://wangfangwen.com/post/73.html
版权声明:本文为原创文章,版权归 老王 所有,欢迎分享本文,转载请保留出处!
阿里云服务器优惠券
减肥不为美,只为走路不磨腿,付出不亚于任何人的努力,成功永远没有尽头,只有岔路口...

发表评论


表情

还没有留言,还不快点抢沙发?