Web前端H5之CSS样式总结

1、CSS介绍
    概念:层叠样式表或者级联样式表(Cascading Stylr Sheets)
    层叠;CSS特性
    CSS作业:设置网页结构的样式(改变html标签的样式),通过CSS给HTML标签设置属性到改变样式
    CSS书写位置介绍:
        * 内嵌式写法:书写在HTML的head位置
            <style type="text/css">书写CSS代码style>
        * 外链式写法
        * 行内式写法
    CSS语法:
        * 选择器 {属性:值;属性:值}
            选择标签的过程
            ** 标签选择器
            ** 类选择器
            ** id选择器
            ** 通配符选择器
            ** 交集选择器(标签指定式)
            ** 后代选择器
            ** 子代选择器
            ** 并集选择器
            补充选择器(C3):
                伪类选择器:
                属性选择器
                伪元素选择器:
        * CSS样式的基本属性(字体属性,颜色属性,边框属性)
            ** 字体属性:主要包括字体综合设置、字体名称、字体大小、字体风格、字体加粗、字体英文大小写转换
                font:设置或者检索对象中文本特性的复合属性
                font-family:一个指定字体名称或者一个种类的字体名称(一次可以设置多个字体,字体与字体之间用“,”隔开)
                    * 直接设置字体对应的名称(黑体,宋体)
                    * 设置字体对应的英文名称(SimSun,NSimSun,SimHei)
                font-size:字体显示的大小
                font-style:以3种方式的一种显示字体:normal(普通)、italic(斜体)和oblique(倾斜)
                font-weight:使字体加粗或者变细(normal,700-加粗,bold-加粗,400-正常显示)
                font-variant:设置英文大小写转换
            ** 颜色和背景属性
                CSS的颜色属性允许设计者指定页面元素的颜色,背景属性用于指定页面的背景颜色或背景图像的属性
                color:设定页面颜色的前景色
                background-cokor:设定页面元素的背景色
                background-image:设定页面元素的背景图像
                background-repeat:设定一个指定的背景图像被重复的方式
                background-attachment:设定背景图像是的跟随页面滚动
                background-position:谁当水平或者垂直方向上的位置
                background:背景属性的综合指定
            ** 边框属性
                用于设置一个元素边框的宽度、样式和颜色
                border  边框符合属性
                border-top:上边框
                border-left:左边框
                border-right:右边框
                border-bottom:下边框
                border-color:边框颜色
                border-style:边框样式
                border-width:边框宽度
                border-top-color:上边框颜色
                border-bottom-color:下边框颜色
                border-left-color:左边框颜色
                border-right-color:右边框颜色
                border-top-style:上边框样式
                border-bottom-style:下边框样式
                border-left-style:左边框样式
                border-right-style:右边框样式
                border-top-width:上边框宽度
                border-bottom-width:下边框宽度
                border-left-width:左边框宽度
                border-right-width:右边框宽度
            **边框样式属性
                none:无边框
                hidder:隐藏边框(IE不支持)
                dotted:边框由点组成
                dashed:边框由短线组成
                solid:边框是实线
                double:边框是双实线
                groove:边框带有立体感的沟槽
                ridge:边框成脊型
                inset:边框内嵌一个立体边框
                outset:边框外嵌一个立体边框



        * 标签选择器
            HTML标签名 {属性:值;}:会把页面中的所有相同的标签都会选中
                常用属性:
                    color:设置前景色(文字颜色)
                    background-color:设置背景色
                    font-size:设置文字大小
                    width:设置宽度
                    height:设置高度
                    text-align: center;设置内容(文字、图片)显示位置
                        注意:该属性只能给块级元素设置
                    text-indent: 2em; 设置首行缩进两个字符

                    <style type="text/css">
                        /*标签选择器*/
                        p {
                            color: rgb(234,12,12);  /*改变文字颜色*/
                            font-size: 50px; /*改变文字大小 */
                            background-color: #D82F92; /*改变背景颜色*/
                            width: 300px; /*设置宽度*/
                            height: 300px;  /*设置高度*/

                        }   
                    style>    
        * 单位介绍
            px:像素
            em:1em = 一个文字大小
        * 颜色的表示方式
            ** 直接设置颜色的名称:red,green,pink
            ** 使用十六进制表示 #0-f
            ** 使用三原色rgb()
                    r:0-255
                    g:0-255
                    b:0-255
            ** 半透明颜色:background-color: rgba(0,0,0,0.5);
                rgba()
                a : 0-1
            ** 使用opacity实现半透明
                opacity:0-1
                background-color: #D82F92;
                opacity: 0.5;
                filter:Alpha(opacity=50);/*IE8以及更早版本的浏览器*/
        * 类选择器
            .自定义类名 {属性:值;}
            使用:
                ** 通过.自定义类名,定义一个类样式
                    .p_red { color: red;}
                ** 标签通过class属性调用类样式
                    <p class="p_red">类选择器1p>
            特点:
                ** 一个类样式可以被多个标签调用
                ** 一个标签可以同时调用多个类样式,只需要在类名字之间加一个空格
                    <p class="p_red public_size">类选择器1p>
                    <p class="p_green public_size">类选择器2p>
            命名规范:
                头;header
                内容:content、container
                尾:footer
                导航:nav
                侧栏:sidebar
                栏目:column
                页面外围控制整体布局宽度;wrapper
                左右中;left right center
                登录条:loginbar
                标志:logo
                广告:banner
                页面主体:main
                热点:hot
                新闻:news
                下载:download
                子导航:subnav
                菜单:menu
                子菜单:submenu
                搜索:search
                友情链接:friendlink
                页脚:footer
                版权:copyright
                注意:不能使用纯数字或者以数字开头定义类名
                      不能使用中文命名
                      不能使用特殊字符或者使用特殊字符开头定义类名
                      不推荐使用类名和标签名定义类名
        * ID选择器(不建议用)
            语法:#自定义名称 {属性:值;}
            使用:
                ** 首先通过#自定义名称,定义一个id选择器样式
                    #p_color {color:red;}
                ** 标签通过id属性调用id样式
                    <div id="p_color">gerrynihaodiv>
            ID选择器与类选择器的区别:
                ** 页面中标签的id必须唯一,不能重用样式的定义
                ** 一个标签只能调用一个id样式,id选择器不能调用多个ID样式,类选择器可以调用多个类样式
        * 通配符选择器
            语法:* {属性:值;}
            特点:该选择器会把所有标签都选中(包括body选择器)
            应用:样式初始化使用(因为不同的浏览器有不同的默认样式,需要初始化页面的文字样式)
        * font属性联写
            font:font-size font-weight font-style font-family line-height
            font:700(粗体) italic(斜体) 30px(字体大小)/20px(行高) 微软雅黑;
            注意:
                1.属性联写书写过程中必须要设置font-size和font-family,其他可以设置也可以不设置
                2.在属性联写中font-size必须要放在font-family之前(例如:30px/20px 微软雅黑)
                3.如果font属性联写中的属性都要设置,则按照上面顺序设置
        * 复合选择器
            **标签指定式选择器
                语法:
                    标签名.类名 {属性:值;}
                或者 标签名#id名 {属性:值;}
                div.one {
                    color: red
                }
            ** 后代选择器
                注意:
                    1,后代选择器标签之间必须是嵌套关系
                    2.选择器与选择器之间必须用空格隔开
                    3.后代选择器只能选择后代标签
                语法:
                    选择器 选择器 选择器 {属性:值;}
                div p {
                    color: green
                }
            * 并集选择器
                语法:
                    选择器,选择器 {属性:值}
                注意:
                    1.选择器与选择器之间必须用“,”隔开
                    2.选择器标签之间的结构可以是任意一种关系
            * 子代选择器
                语法:
                    选择器>选择器 {属性:值;}
                注意:
                    1.子代选择器之间必须是嵌套结构
                    2.子代选择器只能选中直接后代元素
                    3.后代选择器可以选中所有后代元素
                    div>span {
                        color: red;
                    }
            * 属性选择器(会把页面中所有的属性相同的样式进行改变)
                语法:
                    [属性名] {属性:值;}
                    [id][class] {
                        color: red;
                    }
                属性其他选择器
                    [属性=值] {}   
                    [属性^=字母] { }  选中以字母开始的标签
                    [属性$=字母] { }  选中以字母结尾的标签
                    [属性*=字母] { }  选中包含字母的标签

            * 伪类选择器(用于列表标签)
                ◇ 结构伪类
                  语法:
                        选择器:first-child {属性: 值;}
                        选择器:last-child {属性: 值;}
                        选择器: nth-child(n) {属性: 值;}
                        选择器:nth-last-child(n) {属性: 值;}
                        选择器:nth-child(odd) {属性: 值;} 奇数
                        选择器:nth-child(even) {属性: 值;} 偶数
                ◇ 目标伪类
                ◇ 空伪类
                ◇ 排除伪类



你可能感兴趣的:(h5开发)