四、选择器初级和背景

1、选择器

1.通配符选择器 *{margin:0;padding:0;}
2.元素选择器 div{width:;height:;}
3.class选择器 .nav{width:;height:;}
4.id选择器 #banner{width:;height:;}
5.后代选择器 div ul li p{background:;}

命名规范

HTML命名规范:

    以小写字母开头
    不能以数字开头
    见名知意

行业内命名规范:

    可以加 - 或 _
    驼峰命名

2、背景样式

(1)背景颜色

background-color:

    十六进制值:#fff
    英文单词:red     blue     yellow
    rgb / rgba(css3)

(2)背景图片:

background-image:url(‘1.jpg’)

    url(‘’) :   路径
    none :  不使用背景图片

(3)背景图片的重复方式:

background-repeat:

    no-repeat       不重复
    repeat-x        水平方向重复
    repeat-y        竖直方向重复
    repeat      默认值

(4)背景图片的位置:

background-position:X Y

1.关键词写法 top/bottom/left/right/center  第一个值水平,第二个值垂直
2.如果只出现一个关键词,那么另一个对应的就是center
3.百分数值:background-position:20p% 30%;    /*水平 竖直*/
4.具体的数值:background-position:20px 30px;  /*水平 竖直*/

(5)背景关联:

background-attachment:

scroll:默认
fixed:当页面滚动时,背景图片不动

背景样式符合写法

    background:#666 url(‘images/1.jpg’) no-repeat center/cover fixed ;

背景:背景颜色 背景图片 背景重复 背景位置/背景大小 背景关联

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,692评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,893评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,859评论 0 11
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,729评论 32 459
  • 多媒体概念(了解) 文字、图片、音频、视频 计算机图片大小的计算(掌握) 图片大小 = 图片的总像素 * 每个像素...
    法神赵日天阅读 2,593评论 0 1

友情链接更多精彩内容