TypechoJoeTheme

Mr.Jiang || 小龙的个人博客

重学前端第六天 学习CSS

一、布局与选择器

  1. [#box] ID选择器:id表示身份,在页面中元素的id不允许重复,因此id选择器只能选择单个元素
  2. [.nav] 类(别)选择器:选择拥有该类别的多个元素
  3. [div] 标签选择器:根据标签名称,选择对应的所有标签
  4. [*]通用选择器,针对页面上所有的标签都生效

二、样式表层叠

在实际网页开发中,作用于同一个元素上的多个样式产生冲突的情况,不可避免的经常发生,当多个样式发生重叠时,优先级别高的样式会生效。因此得名:层叠样式表 简称css

css优先级

  1. 行业样式>ID选择器>类选择器>标签选择器>通用选择器
  2. 当样式发生冲突时,谁的权重值高,谁就生效

    2.1 通用选择器 * 权重值 0 
    2.2 标签(元素)选择器 div p... 权重值 1
    2.3 类(别)选择器 .nav 权重值 10
    2.4 ID选择器 #btn 权重值 100
    2.5 行内样式 权重值 1000
    

示例:

100  1  10   100   10  
#box p .tt > #box .tt

选择器选择的范围越小越精确优先级就越高

三、css文本属性

.p1{color:red;} /* 文字颜色 */
.p2{font-family:"华文行楷";} /*字体类型 */
.p3{font-size:24px;} /* 文字大小 */
.p4{font-weight:bold;} /* 文字加粗 */
.p5{font-style:italic;} /* 文字倾斜 */
.p6{text-indent:40px;} /* 首行缩进 */
.p7{text-align:center;} /* 水平对齐方式 */
.p8{line-height:100px;} /* 行高 */
.p9{height: 100px;background-color: gray;line-height:100px;} /* 垂直居中 */
.p10{text-decoration:underline;} /* 文本修饰 */

四、背景图片的使用

html,body{
    margin:0;
    height: 100%;
}
body{
    background-image: url(imgs/dong.gif); /* 默认图片平铺 */
    background-repeat: no-repeat; /* 设置不平铺 */
    background-position: center center; /* 水平对齐 垂直对齐 */
}
赞 · 1
评论 (0)