html&css入门第三篇

8、CSS样式的引入方式

<!-- 1、内联样式：直接在html标签中使用style=''
    2、内部样式：style标签+选择器
    3、外部样式：通过link引入
        rel：定义外部文档和文档的关系
        href：文档的路径
    !important强制把样式的优先级设置最高
    区别：外部样式和内部样式  是可以重复使用
    优先级：内联>外部>内部（外部和内部的优先级取决于哪一个后引入）
         id优先级>class优先级
           

9、CSS颜色

<!-- CSS颜色：
        1、英文单词
            red，blue这一类表示颜色的单词
        2、三原色表示法 rgb rgba
            rgb(0,0,0)  rgba(0,0,0,0.5) rgb取值范围是0-255  a表示透明度取值是0-1
        3、十六进制
            #ffffff => #fff    #ffffffdd dd表示透明度 取值全都是 0-f
            #000000 => #000 -->
           

10、CSS背景样式

<!-- 背景样式：background 修改元素背景
        background-color 背景颜色
        background-image: url('路径') 背景图片
        background-position 控制背景位置
        background-size 背景图片的尺寸 
            cover:把图片等比例放大直到背景被填满
            contain:把图片整个显示到背景上
        background 背景，简写 -->
           

11、CSS边框样式

<!-- 边框样式：元素的边框
    border-style 边框样式 实线、虚线等样式
    border-width 边框的宽度
    border-color 边框的颜色
    border:粗细 样式 颜色 -->
           

12、CSS字体样式

<!-- 字体样式：
    font-family 字体样式
    font-size 字体大小
    font-weight 字体粗细
    color 颜色 -->
           

13、CSS文本样式

<!-- 文本样式：
    text-decoration 文本装饰
    text-align 文本对齐的方式
    text-indent 文本缩进
    text-transform 文本大小写
        em 单位 1em = 字体大小
    text-shadow 文本阴影
    line-height 文本高度 主要用于文本居中
    letter-spacing 字母间距
    word-spacing 单词间距
    word-break 换行方式 -->    <!-- 文本样式：
    text-decoration 文本装饰
    text-align 文本对齐的方式
    text-indent 文本缩进
    text-transform 文本大小写
        em 单位 1em = 字体大小
    text-shadow 文本阴影
    line-height 文本高度 主要用于文本居中
    letter-spacing 字母间距
    word-spacing 单词间距
    word-break 换行方式 -->
           

14、伪类

<!-- 伪类： 添加一些选择器的特殊效果
        格式 选择器:伪类名
    只对超链接有效:
        :link 链接访问之前的样式
        :visited 链接访问之后的样式
    对所有标签都有效的：
        :hover 鼠标悬停的样式
        :active 鼠标按住元素后的样式
        :before 在元素之前添加新的内容
        :after 在元素之后添加新的内容
      重点是设计思维：  :nth-child(n) 选择所有选择器的父元素的第n个子元素 2n 指的是第2 4 6 ...个子元素


      .list:nth-last-child(1) 
{
    border-bottom: none;
    background-position-y: -440px;
}

.list:nth-child(2n){

background-color:red;
}

.list:nth-child(1){
    background-position-y: -290px;
    
}

.list:nth-child(2){
    background-position-y: -340px;
    
}

.list:nth-child(3){
    background-position-y: -390px;
    
} 
           

15、CSS继承

<!-- 继承:
        文本样式会继承
        元素的宽高等布局样式不会继承 -->