10.31 知识总结（选择器、css属性相关）

一、选择器

    1.1 属性选择器

通过标签的属性来查找标签，标签都有属性
<div class="c1" id="d1"></div>

id值和class值是每个标签都自带的属性，还有另外一种：自定义属性
<div class="c1" id="d1" username='kevin' password='123'></div>
针对于username='kevin' password='123'属性就是div标签的自定义属性

   1.2  分组和嵌套选择器

 分组选择器使用逗号隔开，所有的选择器都是并列的
 组合(嵌套)选择器使用的是空格隔开，选择器不是并列的，最终生效的还是最后一个选择器

  1.3  伪类选择器

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

 1.4 伪元素选择器

 p:first-letter {
            font-size: 48px;
            color: red;
}

    /*在每个<p>元素之前插入内容*/
    p:before {
        content: "你好啊";
        color: red;
    }

        /*在每个<p>元素之后插入内容*/
 p:after {
    content: "[?]";
    color: blue;
}

before和after多用于清除浮动。它可以解决浮动中得父标签塌陷问题!!!

注： 选择器的优先级

比较选择器的优先级高低
1. 选择器相同的情况下：
         离谁越近，就听谁的，就近原则.
2. 选择器不同的情况下：
    行内选择器 >>>    id选择器  >>>   类选择器  >>>  标签选择器

二、  CSS属性相关

       2.1  宽和高

width属性可以为元素设置宽度。
height属性可以为元素设置高度。
# 块级标签才能设置宽度，内联标签的宽度由内容来决定。
"""默认情况下，只有块儿级元素才能设置长、宽，内联元素不能设置，设置了也不错，就是没有效果而已"""

     2.2   字体属性

font-weight用来设置字体的字重（粗细）。
值                    描述
normal                默认值，标准粗细
bold                粗体
bolder                更粗
lighter                更细
100~900                设置具体粗细，400等同于normal，而700等同于bold
inherit                继承父元素字体的粗细值

# 文本颜色
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
● 十六进制值 - 如: ＃FF0000
● 一个RGB值 - 如: RGB(255,0,0)
● 颜色的名称 - 如:  red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

# 文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
left        左边对齐 默认值
right        右对齐
center        居中对齐

# 文字装饰
text-decoration
none            默认。定义标准的文本。
underline        定义文本下的一条线。
overline        定义文本上的一条线。
line-through    定义穿过文本下的一条线。

# 背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

# 支持简写
background:#336699 url('1.png') no-repeat left top;
    
# 边框
边框属性 
● border-width
● border-style
● border-color
#i1 {
  border: 2px solid red;
}

border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。

 2.3  display属性

值    意义
## display:"none"    HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"    默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"    按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"    使元素同时具有行内元素和块级元素的特点。