css

学习笔记 专栏收录该内容
21 篇文章 0 订阅
CSS概述
    CSS是 层叠样式表 (Cascading Style Sheets)
    定义HTML的样式,即如何显示HTML标签(HTML是结构,CSS是样式)
    样式是加在标签上的,没有标签样式就无从谈起
    存在兼容性问题:浏览器内核分为IE内核和Webkit内核
    w3cschool教程是非常好的教程,可去学习



将CSS添加到HTML中
    * 内部样式表
        在<head>中添加<style>标签,直接写入css样式
    * 外部样式表
        在<head>中添加<link>标签,引入外部css文件(外部css文件后缀就是css)
    * 内联样式
        在需要的标签中添加属性style,写入css样式
    例:
        内部样式表:
            <head>
                <style>
                    body {color:blue}
                </style>
            </head>
        外部样式表:
            <head>
                <link rel="stylesheet" href="a.css">
            </head>
            a.css内容:body {color:blue}
        内联样式:
            <body style="color:blue">



样式层叠次序
    当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
    越往下拥有越高的优先权。
        浏览器缺省设置 
        外部样式表 
        内部样式表(位于 <head> 标签内部) 
        内联样式(在 HTML 元素内部)



CSS语法
    * CSS 语法由三部分构成:选择器、属性和值
        selector {property: value}
    如:
        body {color: blue} 
        定义页面背景色为蓝色
        多个属性中间用;隔开



选择器
    * 标签选择器    
        标签名{属性:值;}    例:li{color:red;}
    * class选择器
        .class值{属性:值;}  例,class为a的标签: .a{color:red;}
    * id选择器
        #id值{属性:值;}     例,id为a的标签: #a{color:red;}
    * 层次选择器
        父选择器 子选择器{属性:值;}     例,li下的span: li span { color:red;}
    * 伪类选择器
        语法: 选择器:伪类{属性:值;}
        常用伪类:
            :link       未访问过的元素
            :visited    已访问过的元素
            :hover      当前鼠标悬停的元素
            :active     元素被激活时,鼠标按住不放
            :focus      获取焦点时
            :first-child 指定标记的第一个元素
        前四个伪类一般用于超链接,也可以用于别的元素,但ie6只支持超链接.后两个ie不支持
        :link , :visited , :hover 三个如果两个以上同时出现,则必须按照前面的顺序,否则失效
    * class和id属性
        * 是所有标签共有的属性,如
            <li class="a">
            <li id="b">
        * class和id的区别:
            class的值可以重复,但是id的值不能重复
    * 选择器可以配合使用,如
        class为a的li                li.a{color:red;}
        class为a的li下面的span      li.a span{color:red;}
        被访问过的class为a的超链接  a.a:visited{color:red;}
    * 同时给多个选择器添加相同的样式,可让多个选择器用逗号隔开,如
        li,a,h1 { color:red;}



注释
    /* 注释内容 */



常用单位
    * 长度单位
        px(像素) 
    * 百分比单位
        %(百分比)
    * 颜色单位
        可以用颜色的名称,如red
        #六位十六进制数 : 如 #ffffff 表示白色
        #三位十六进制数 : 如 #036 和 #003366等效



属性列表
    * 背景
        background              多个背景属性的简写
        background-attachment   背景图片是否固定
        background-color        背景颜色
        background-image        背景图片
        background-position     背景图片开始位置
        background-repeat       背景图片重复方式
        background-size         背景图片大小
    * 文本
        font                    多个字体属性的简写
        font-family             字体系列
        font-size               字体大小
        font-style              字体样式(是否斜体)
        font-weight             字体粗细
        color                   字体颜色
        letter-spacing          字符间距
        line-height             行高
        text-align              水平对齐方式
        text-decoration         文本装饰效果(下划线)
        text-indent             文本首行缩进
        text-transform          文本大小写
        white-space             处理文本中的空白符和换行符
        word-spacing            单词间距
        word-break              非中日韩文本的换行规则
        word-wrap               换行时可对单词进行拆分(与word-break有细微区别)
    * 边框
        border                  多个边框属性的简写
        border-bottom           下边框的多个属性的简写
        border-color            边框颜色
        border-style            边框样式
        border-width            边框宽度
        border-bottom-color     下边框颜色
    * 区块
        weight                  宽度
        height                  高度
        opacity                     透明度(对于ie此属性不管用)
        filter:alpha(opacity:数值)  ie滤镜设置透明度
        margin                  外边距
        margin-bottom           底部外边距
        padding                 内边距
        padding-bottom          底部内边距
        text-align              水平对齐方式
        vertical-align          垂直对齐方式
        visibility              元素是否可见
        display                 元素的显示类型(块状元素,行内元素,none)
        overflow                内容溢出容器时的操作
        cursor                  鼠标样式(可使用自定义图片)
    * 列表
        list-style              多个列表属性的简写
        list-style-image        列表项图片
        list-style-position     列表项标记是否缩进
        list-style-type         列表项标记类型(可设为无)
    * 定位
        float                   浮动
        clear                   消除浮动
        position                定位方式
        left                    距离左边的距离
        top                     距离顶部的距离
        right                   距离右边的距离
        bottom                  距离底部的距离
        z-index                 元素的层叠顺序
        clip                    裁剪绝对定位元素



属性详解
    * 背景
        background              多个背景属性的简写
            各属性位置任意,用空格隔开
            例: background:url(a.jpg) no-repeat;
        background-attachment   背景图片是否固定
            scroll  滚动
            fixed   固定不动
        background-color        背景颜色
        background-image        背景图片
            语法:background-img:url(路径)
        background-position     背景图片开始位置
            数值    例:background-image:20% 12px;
            left,center,right   bottom,middle,top
        background-repeat       背景图片重复方式
            repeat      水平垂直重复
            repeat-x    水平重复
            repeat-y    垂直重复
            no-repeat   不重复
        background-size         背景图片大小
            数值    例:background-size:50px 50px;
            cover   是图片放到至完全覆盖区域,图片可能不能全部显示
            contain 是图片缩放到恰好能全部显示
    * 文本
        font                    多个字体属性的简写
            指定顺序: weight variant style size family 用空格隔开
            例: font:bolder italic 24px 宋体;
        font-family             字体系列
            例: font-family:黑体,宋体;      如果第一种没有则使用第二种
        font-size               字体大小
        font-style              字体样式(是否斜体)
            normal  普通
            italic  斜体
            oblique 倾斜
        font-weight             字体粗细
            数值    100~900
            normal  普通
            bold    加粗
            bolder  更粗
            lighter 更细
        color                   字体颜色
        letter-spacing          字符间距
        line-height             行高
        text-align              水平对齐方式
            left    居左
            center  居中
            right   居右
            justify 可调整
        text-decoration         文本装饰效果(下划线)
            none        无
            overline    上划线
            underline   下划线
            line-through 删除线
        text-indent             文本首行缩进
        text-transform          文本大小写
            none        无
            uppercase   大写
            lowercase   小写
            capitalize  首字母大写
        white-space             处理文本中的空白符和换行符
            值          空白符      换行符      自动换行
            pre-line    合并        保留        允许
            normal      合并        忽略        允许
            nowrap      合并        忽略        不允许
            pre         保留        保留        不允许
        word-spacing            单词间距
        word-break              非中日韩文本的换行规则
            normal      普通
            break-all   允许单词内换行
            keep-all    空格或连字符换行
        word-wrap               换行时可对单词进行拆分(与word-break有细微区别)
            normal      普通
            break-word  允许单词内或url内换行
    * 边框
        border                  多个边框属性的简写
            无顺序要求,各属性用空格隔开
            例: border:1px solid red;
        border-bottom           下边框的多个属性的简写
        border-color            边框颜色
        border-style            边框样式
            none    无      groove  凹线
            solid   实线    ridge   凸线
            dashed  虚线    inset   内陷
            dotted  点线    outset  外凸
            double  双线
        border-width            边框宽度
        border-bottom-color     下边框颜色
    * 区块
        weight                  宽度
        height                  高度
        opacity                 透明度(对应ie此属性不管用)
            取值为小数
        filter:alpha(opacity:数值)  ie滤镜设置透明度
            取值为1~100
        margin                  外边距
            取值为 数字,百分比,auto(auto可用来居中)
        margin-bottom           底部外边距
        padding                 内边距
        padding-bottom          底部内边距
        text-align              水平对齐方式
            left    居左
            center  居中
            right   居右
            justify 可调整
        vertical-align          垂直对齐方式
            top     顶部对齐
            middle  居中对齐
            bottom  底部对齐
            数值
            百分比
        visibility              元素是否可见
            visible 显示
            hidden  隐藏(但还是占位置)
        display                 元素的显示类型(块状元素,行内元素,none)
            none        隐藏(不占位置)
            block       块状元素
            inline      内联元素
            inline-block 行内块元素(有块元素的特点但不换行)
        overflow                内容溢出容器时的操作
            hidden  隐藏
            visible 显示在外
            scroll  添加滚动条
            auto    自动
        cursor                  鼠标样式(可使用自定义图片)
            url         需使用的自定义光标的 URL。
            default     默认光标(通常是一个箭头) 
            auto        默认。浏览器设置的光标。 
            crosshair   光标呈现为十字线。 
            pointer     光标呈现为指示链接的指针(一只手) 
            move        此光标指示某对象可被移动。 
            e-resize    此光标指示矩形框的边缘可被向右(东)移动。 
            ne-resize   此光标指示矩形框的边缘可被向上及向右移动(北/东)。 
            nw-resize   此光标指示矩形框的边缘可被向上及向左移动(北/西)。 
            n-resize    此光标指示矩形框的边缘可被向上(北)移动。 
            se-resize   此光标指示矩形框的边缘可被向下及向右移动(南/东)。 
            sw-resize   此光标指示矩形框的边缘可被向下及向左移动(南/西)。 
            s-resize    此光标指示矩形框的边缘可被向下移动(北/西)。 
            w-resize    此光标指示矩形框的边缘可被向左移动(西)。 
            text        此光标指示文本。 
            wait        此光标指示程序正忙(通常是一只表或沙漏)。 
            help        此光标指示可用的帮助(通常是一个问号或一个气球)。 
    * 列表
        list-style              多个列表属性的简写
            无顺序要求,各属性用空格隔开
        list-style-image        列表项图片
            语法:list-style-image:url(路径);
        list-style-position     列表项标记是否缩进
            inside  内部
            outside 外部
        list-style-type         列表项标记类型(可设为无)
            disc    实心圆      lower-roman 小写罗马数字
            circle  空心圆      upper-roman 大写罗马数字
            square  空心矩形    lower-alpha 小写希腊字母
            none    无          upper-alpha 大写希腊字母
            decimal 数字
    * 定位
        float                   浮动
            none    无
            left    左浮动
            right   右浮动
        clear                   消除浮动
            none    无
            left    左边不允许
            right   右边不允许
            both    两侧都不允许
        position                定位方式
            absolute    绝对定位
            relative    相对定位
            static      默认
            fixed       固定定位
        left                    距离左边的距离
        top                     距离顶部的距离
        right                   距离右边的距离
        bottom                  距离底部的距离
        z-index                 元素的层叠顺序
            值为数字,无单位,可为负数,越大越靠上
        clip                    裁剪绝对定位元素
            例:clip:rect(0px 50px 200px 0px)



属性的值
    如 margin 属性的值,可以是一个值,两个值,三个值,四个值
    四个值: 上, 右, 下, 左
    三个值: 上, 左右, 下
    两个值: 上下, 左右
    一个值: 上下左右
    margin值除了数值还可以使auto,表示居中



CSS 框模型概述
    元素从内而外分别是 内容,内边距(padding),边框(border),外边距(margin)
    背景应用于由内容和内边距组成的区域。外边距是透明的
    width 和 height 指的是内容区域的宽度和高度.增加内边距、边框和外边距会增加元素框的实际总尺寸。
    外边距可以是负值
    外边距合并:当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者(而不是和,所以发生了合并)



css布局
    * 一切皆为框
        div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。
        与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
        可以使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。
        还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
    * 定位机制
        CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
        除非专门指定,否则所有框都在普通流中定位。
        块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
        行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
    * position 属性
        通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。
        官方解释
            static 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。 
            relative 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。 
            absolute 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 
            fixed 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。 
        我的解释
            静态定位:默认的定位方式,浏览器按顺序读取页面元素并按顺序将他们在窗口中定位,从上到下,从左到右显示
            绝对定位:原点为最近一个绝对定位或相对定位的父类的左上角,根据left和top平移.脱离文档流,后面的元素填补空缺
            相对定位:原点为元素原来应该在的位置的左上角,根据left和top平移.不脱离文档流,保留原来的位置.后面的元素还在原来的位置
            固定定位:原点为视窗左上角,根据left和top平移.脱离文档流,后面的元素填补空缺
    * 浮动
        浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止
        浮动框脱离文档流,后面的元素填补空缺
        浮动的元素自动变为块级元素,并且层级较高,如果下面有元素,则会覆盖在上面
        如果包含框太窄,无法容纳水平排列的多个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
        行框和清理
            浮动元素通常可以缩短行框,使浮动元素和行框处于一行,造成围绕效果
            要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
    * 层叠顺序
        元素可能相互覆盖,可使用z-index属性设置元素的层叠顺序.
        但是注意:z-index不对静态定位的元素生效.值为数字,无单位,可为负数,越大越靠上



经验之谈
    调整元素的位置,最常用的就是利用元素的内边距和外边距.其次才是定位,定位比较费劲
    虽然div+css代码比较节俭,但有时table布局更容易(比如表单).两种布局都要熟练掌握

 
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

qq1123734918

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值