JavaWeb笔记(2)-CSS学习

最新推荐文章于 2019-10-17 15:41:47 发布

醉美遇见你倾城

最新推荐文章于 2019-10-17 15:41:47 发布

阅读量112

点赞数

分类专栏： JavaWeb笔记

本文链接：https://blog.csdn.net/yy19961124/article/details/98100242

版权

JavaWeb笔记专栏收录该内容

32 篇文章 1 订阅

订阅专栏

CSS：cascading style sheets层叠样式表

1. 层叠：多个样式可以作用在同一html的元素上，同时生效
2. 好处：
    a. 样式的种类更加丰富
    b. 将内容展示和样式控制分离
        1. 降低耦合度
        2. 分工协作更加容易
        3. 提高开发效率

CSS使用方式

1. 内联样式
    a. 在标签内使用style属性指定css代码
        例如：
            <div style="color:read;">hello css</div>
    b. 不推荐使用内联样式，并没有分离内容和样式
2. 内部样式
    a. 在head标签内，定义style标签，style标签的标签体内容就是css代码
        例如：
            <head>
                <style>
                    div{
                        color:red;
                    }
                <style>
            </head>
            于是在body标签内容的所有div标签都会变为红色
    b. 内部样式只在当前页面生效
3. 外部样式
    a. 定义css资源文件
    b. 在head标签内，定义link标签，herf属性引入外部的css资源文件
        例如：
            <link rel="stylesheet" href="cssPath">
    c. 另一种引入方式：
        在style标签内使用@import：
        例如：
            <style>
                @import "cssPath";
            </style>

css语法：

1. 格式：
    选择器{
        属性名1:属性值1;
        属性名2:属性值2;
        属性名3:属性值3;
        ...
    }
2. 选择器：筛选具有相似特征的元素
    a. 基本选择器：
        1. id选择器：选择具有相同id属性值的元素
            * 语法格式：
                #id属性的值{
                    //样式
                }
            * 建议html页面元素id唯一
        2. 元素选择器：选择具有相同标签名称的元素
            * 语法格式：
                标签名称{
                    //样式
                }
            * id选择器优先级高于元素选择器
        3. 类选择器：选择具有相同class属性值的元素
            * 语法格式：
                .class属性值{
                    //样式
                }
            * 类选择器优先级高于元素选择器，id选择器优先级高于类选择器
    b. 扩展选择器：
        4. 通用选择器：选择所有元素
            * 语法格式：
                *{
                    //样式
                }
        5. 并集选择器：被并集选择器选中的元素都会生效
            * 语法格式：
                选择器1,选择器2{
                    //样式
                }
        6. 子选择器：筛选父元素下的符合要求的子元素
            * 语法格式：
                父元素选择器 子元素选择器{
                    //样式
                }
        7. 父选择器：筛选子元素的符合要求的父元素
            * 语法格式：
                父元素选择器>子元素选择器{
                    //样式
                }
        8. 属性选择器：选择元素名称，属性名=属性值的元素
            * 语法格式：
                元素名称[属性名="属性值"]{
                    //样式
                }
            * 一般用于选择input标签，例如:input[type="text"]{//样式}
        9. 伪类选择器：选择一些元素具有的状态
            * 语法格式：
                元素:状态{
                    //样式
                }
            * 一般用于控制具有不同状态的标签，例如超链接标签：
                连接具有状态link(初始)，hover(鼠标悬停)，active(鼠标点击不松开)，visited(已访问过)
                a:link{
                    //设置初始状态样式
                }
                a:hover{
                    //设置鼠标悬停在超链接上的样式
                }
                a:active{
                    //设置鼠标点击超链接瞬间的状态，可以点击不松开查看该样式改变
                }
                a:visited{
                    //设置超链接点击访问过后的样式
                }
            * 其他标签的状态需要查看文档
3. 属性：css文档中有分组，详细的需要查看文档
    a. 字体，文本：
        * font-size：字体大小(px)
        * color：颜色
        * text-align：文字对齐方式
        * line-height：行高
        * ...
    b. 背景：
        background：背景色
            --复合属性，可以设置背景色，背景图片等
            -- 使用方式：
                background: 属性值1 属性值2 属性值3 ...;
            -- 例如：
                background: url("imgPath") no-repeat center;
    c. 边框：
        * border：边框 
            -- 复合属性，可以分开设置边框的4个边
            -- 使用方式：
                border: 属性值1 属性值2 属性值3 ...;
    d. 尺寸：
        * width：宽度
        * height:高度
    e. 盒子模型：用来控制布局
        1. margin：外边距
            -- 复合属性，可以分别设置4个方向的边距
        2. padding：内边距
            -- 复合属性，可以分别设置4个方向的边距
            -- 默认情况下，内边距设置会影响整个盒子的大小
                需要添加属性设置box-sizing: border-box;消除影响，让width和height为盒子的最终大小
        3. 内外边距是相对而言的
            -- 从外看内，设置的是外部元素的内边距
            -- 从内看外，设置的是内部元素的外边距
        4. float：浮动属性
            -- left：左浮动
            -- right：右浮动