2.CSS 

CSS 级联样式表

选择器类型
标记选择器，直接使用HTML标记名称作为选择器，它定义的样式作用于所有与选择器同名的标记
p{
    background-color: cadetblue;
    font-size: 20px;
    color: green;
}

类选择器，任何HTML标记中都可以使用class属性，选择多个类要间隔空格class="c1 c2"
.c1{
    color: brown;
}

联合选择器
p.c2{
    background-color: blue;
}

id选择器,只有页面上的标记<body>及其内的标记里才能具有id属性，每个id属性值必须唯一，且只能用于一个指定的标记，
  id属性的取值必须以字母开头，有字母，数字，下画线，连字符组成。
  class比id更灵活，除非想唯 一标识用id

#right{
    color: blueviolet;
}

伪类选择器 用法为   标记：伪类名{...}
a:link{color: blue;}                链接未被访问前的样式
a:visited{color: blueviolet;}       链接被访问后的样式
a:hover{color: brown;}              鼠标悬停时的样式
a:active{color: burlywood;}         在被用户激活时（在鼠标点击与释放之间）的样式
设置顺序不能变，否则失效（未测试）

first-letter    作用于块，设置第一个字符的样式
first-line      作业于块，设置第一行的样式
first-child     设置第一个子标签的样式


属性选择器 给带有指定属性的HTML标记设置样式
  [属性名]{属性 ：属性值}  
[title] {color:red;}

  [属性名="属性值"] {}    
p[name="chu"]{font-style: initial;}

    [attribute~=value]       用于选取属性值中包含指定词汇的标记 （用空格隔开的字词列表）
    [attribute|=value]       用于选取带有指定值开头的属性值的标记   （属性值是value或者是以value开头的值）
    [attribute^=value]       匹配属性值以指定值开头的每个标记
    [attribute&=value]       匹配属性值以指定值结尾的每个标记
    [attribute*=value]       匹配属性值中包含指定值的每个标记


选择器声明
  集体声明    
h1,h2,p{color: khaki;}
h2.special,.special,#one{text-decoration: khaki;}
  全局声明    
*{color:purple;}
  派生选择器  
li strong {font-style: italic;font-weight: normal}
strong{font-weight: bolder;}
上面的例子 只有ol中的strong元素中的样式为斜体

CSS定义与引用
内联样式表（行内样式表） 避免使用
    <标记 style="属性：属性值;">

内部样式表
    <style type="text/css">
        选择器  {}
    </style>

外部样式表
    1.<link type="text/css" rel="stylesheet" href="url">

    2.<style type="text/css">
        @import url{""};
        选择器  {}
      </style>


CSS优先级
    行内样式 > id样式 > class样式 > 标记样式


div{position:absolute; width: 200px; height: 200px; color: white;}
#d1{background-color: purple; z-index: 0;}
#d2{background-color: rebeccapurple; top:25px; left:50px; z-index: 1;}
#d3{background-color: rosybrown; top:50px; left:100px; z-index: 2;}

    position:       定义图层的定位方式
        static      静态定位，默认
        absolute    绝对定位
        relative    相对定位，图层不可重叠
        fixed       图层位置固定，不滚动
    border:         边框
    background-color:
    left,top:       定义图层的左上角位置
    width,height:
    float:          设置图层的浮动方式
        left/right/none
    clear:          清除图层内浮动
        left/right/both/none
    z-index:        设置图层的层叠上下层关系，值越大，图层位置越高
    overflow:       内容溢出控制
        visible     始终显示滚动条
        auto        不显示滚动条，但超出部分可见，内容超出时显示滚动条
        hidden      超出时隐藏内容  




    CSS样式属性
        1.单位
            绝对单位：in(英寸)、cm、mm、pt(磅 1pt=1/72in) ，很少使用，多用在印刷上
            相对单位: em 表示元素的字体高度，能根据font-size来确定单位大小
                    例如p{font-size:24px;line-high:2em;}  行高就是48px
                     ex 表示以小写字母x的高度作为参考，浏览器中常将em/2 = ex 
                     px 根据像素点来确定
                     % 一般通过另一个值计算
        2.字体样式
            font-size 设置字体大小
            font-style:normal/italic/oblique 设置字体风格
                       不使用/ 斜体 /倾斜字体 
            font-family:字体1，字体2，... 设置字体
                多字体时用“，”分隔，浏览器依次查找，如果字体名称出现空格，必须用“()”括起来
            font-variant:normal/small-caps  设置使用小型的大写字母
            font-weight:normal(400)/bold(700)/bolder/lighter/整数(100-900,由细到粗) 设置字体加粗
            font:style weight variant size/line-height family 一次性设置多个字体属性
        3.文本样式
            leter-spacing:normal/长度单位   字符间距
            line-height:normal/length       行距
            text-indent:length              首行缩进
            text-decoration:none/underline/overline/line-through    字符装饰（下划线...）
            text-transform:capitalize/uppercase/lowercase/none      英文大小写转换
            text-align:left/right/center/justify                    水平对齐
            vertical-align:top/middle/bottom/text-top/text-bottom   垂直对齐
        4.背景与颜色
            color:                  设置字体颜色
            background-color:       背景颜色   
            background-image: url      背景图片
            background-repeat: repeat/no-repeat/repeat-x(从左向右)/repeat-y(从上到下)   背景图片没铺满时是否重叠
            background-attachment:scroll/fixed  设置背景图像是否随滚动条一起滚动
            background-position:水平参数 垂直参数   设置背景图片的具体起始位置(两个参数间空格分开)
                    left|center|right/%/xpos     top|center|bottom/%/ypos
            background:color image repeat position attachment
        5.列表样式
            list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/decimal(阿拉伯数字)/lower-roman(罗马数字)/upper-roman/lower-alpha(英文字母)/upper-alpha/none
            list-style-image:url|none   设置列表替代图像
            list-style-position:outside/inside  设置图像位置
            list-style:type image position

    CSS盒模型：每个元素都是长方形的盒子 由外到内依次为：margin(边界)、border(边框)、padding(填充)、content(内容)
        margin-top/right/bottom/left:数值/auto
        margin:10px 10px 10px 10px  上 右 下 左
        margin:10px 10px 10px       上 左右 下
        margin:10px 10px            上下 左右
        margin:10px                 上下左右

        border-style:none/hidden/dotted(点状)/dashed(虚线)/solid(实线)/double(双线)/groove(3D凹槽)/ridge(山脊状)/inset(沉入感)/outset(浮出感)
        border-top/right/bottom/left-style:
        border-style:上 右 下 左    （下面都可以这样设置）       
        border-width:medium(默认)/thin/thick/数值
        border-color:
        border:width style color

        padding同margin

 

posted @ 2019-10-14 11:33  莫莫君不恋爱  阅读(269)  评论(0)  编辑  收藏  举报