CSS样式精要-优快云博客

css 剩余知识点汇总
1.伪元素
:focus{
color:red;

}

例如:
input:focus{
    background-color:yellow;
}

<input type = "text" name = "username" />//当输入内容的时候,显示的背景颜色为黄色.

2.伪元素
.first-line{
color:red;
}

例如:
    p.first-line{
        color:red;
    }

    效果为:p标签的首行显示为红色.

3.first-letter
.first-letter{
color:red;
}

例如:
    p.first-letter{
        color:red;
    }

    效果为:首行的首字母显示为红色.

4..before .after 在标签的首位置和尾位置,插入内容.

5.选择器的优先级:
因此这三个简单选择器的优先级顺序为：HTML标签属性>id选择器>类选择器>元素选择器

6.css 样式表的使用方式:
1.background-color: 设置背景颜色
transparent 透明
inherit 继承父类颜色

2.background-image  设置背景图片
    background-repeat  设置背景图片是否重复.
    repeat 横向纵向都重复
    repeat-x  横向
    repeat-y 纵向
    no-repeat 不重复


3.background-position  设置背景图片的位置
    top,left...
    x% y%
    xpx ypx;

3.color  字体颜色
    inherit  继承父类颜色

4.文字缩进
    text-indent  设置缩进(多行内容只有第一行缩进)
    xpx  像素
    x% 基于父元素宽度的百分比
    inherit 继承父元素的文字缩进属性

5.文本对其方式 text-align
    left
    right
    center

6.font-size  字体大小
    xpx  

7.font-family  设置字体
    times Georgia

8.font-style  字体风格
    italic 斜体
    normal 正常显示
    ....

9.font-weight 字体加粗设置
    normal 正常显示
    bold  加粗
    bolder bold的扩展
    lighter bold的缩减

    整数值....

10.letter-spacing  字母间距
    默认是0


11.word-spacing  字间距


12.text-transform 字符转换
    none 不做处理
    uppercase 大写
    lowercase 小写
    capitalize 首字母大写


13.text-decoration  文本修饰 
    none 不做处理
    underline  下划线
    overline 上划线
    line-through 文字中间的贯穿线
    bink 闪烁效果


14.list-style-type  列表的标志类型
    none 无标志
    disc 实心圆
    circle 空心圆
    square 实心方块
    decimal 数字标志
    lower-roman  小写罗马文
    upper-roman 大写罗马文
    lower-alpha 小写字母
    upper-alpha 大写字母

15.表格边框
    border 属性设置表格边框
    border-collapse  设置边框折叠为单一边框
    text-align(水平) vertical-align(垂直)  文本对其方式
    padding 控制表格中内容与边框的距离
    border-spacing 设置分隔单元格边框的距离
    caption-side 设置表格标题的位置
    empty-cells 设置是否显示表格中的空单元格
    table-layout  设置显示单元.行.列算法


16.outline 轮廓
    outline是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
    outline-color 颜色
    outline-style 轮廓的样式
    outline-width 轮廓的宽度