前端开发利器CSS之完美容颜

请先掌握HTML知识!!!!详见:HTML之常用标签整理

四、CSS开始

    1、认识CSS样式
        使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等

    2、CSS样式的优势
        用<span></span>括起来,统一设置css样式

    3、CSS代码语法
        css 样式由选择符和声明组成,而声明又由属性和值组成
        p{color:blue}(选择符{属性  声明  值})
            选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
            声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔

    4、CSS注释代码
        用/*注释语句*/来标明(Html中使用<!--注释语句-->)

五、CSS样式基本知识
    1、内联式CSS样式(直接写在现有的HTML标签中)
        <p style="color:red">这里文字是红色。</p>
        注意要写在元素的开始标签里,css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开
        <p style="color:red;font-size:12px">这里文字是红色。</p>

    2、嵌入式CSS样式(写在当前的文件中)
        把css样式代码写在<style type="text/css"></style>标签之间
        嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间

    3、外部式CSS样式(写在单独的一个文件中)
        把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内
        <link href="base.css" rel="stylesheet" type="text/css" />
        注意:
            1、css样式文件名称以有意义的英文字母命名,如 main.css。
            2、rel="stylesheet" type="text/css" 是固定写法不可修改。
            3、<link>标签位置一般写在<head>在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素.

    2、标签选择器
        标签选择器其实就是html代码中的标签

    3、类选择器    
        .类选器名称{css样式代码;}
        注意:
            1、英文圆点开头
            2、其中类选器名称可以任意起名(但不要起中文噢)
        使用方法:
            第一步:使用合适的标签把要修饰的内容标记起来
            第二步:使用class="类选择器名称"为标签设置一个类
            <span class="stress">胆小如鼠</span>
            第三步:设置类选器css样式
            .stress{color:red;}/*类前面要加入一个英文圆点*/

    4、ID选择器
        在很多方面,ID选择器都类似于类选择符。
        区别:
        标签之内。

        三种方法的优先级
            这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式
            嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面
            总结来说,就是--就近原则(离被设置元素越近优先级别越高)

六、CSS选择器
    1、什么是选择器
        每一条css样式声明(定义)由两部分组成
        选择器{
            样式;
        }
            1、为标签设置id="ID名称",而不是class="类名称"。
            2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。

    2、标签选择器
        标签选择器其实就是html代码中的标签<html>、<body>、<h1>、<p>、<img>
            p{font-size:12px;line-height:1.6em;}

    3、类选择器
        .类选器名称{css样式代码;}
        注意:
            1、英文圆点开头
            2、其中类选器名称可以任意起名(但不要起中文噢)
        使用方法:
            第一步:使用合适的标签把要修饰的内容标记起来
            第二步:使用class="类选择器名称"为标签设置一个类
            第三步:设置类选器css样式

    4、ID选择器
        在很多方面,ID选择器都类似于类选择符
        区别:
            1、为标签设置id="ID名称",而不是class="类名称"。
            2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。

        类和ID选择器的区别
            相同点:可以应用于任何元素
            不同点:
                1、ID选择器只能在文档中使用一次。
                在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
                2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
    5、子选择器
        大于符号(>),用于选择指定标签元素的第一代子元素
            .food>li{border:1px solid red;}

    6、包含(后代)选择器
        加入空格,用于选择指定标签元素下的后辈元素
            .first  span{color:red;}

        子选择器和包含选择器区别:
            请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择
        总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

    7、通用选择器
        使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色
            * {color:red;}

    8、伪类选择器
        允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
            a:hover{color:red;}
        关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是a标签上使用:hover了(只有这种兼容所有的浏览器)
        现在比较常用的还是a:hover的组合

    9、分组选择器
        为html中多个标签元素设置同一个样式时,可以使用分组选择符(,)
            h1,span{color:red;}

七、CSS的继承、层叠和特殊性
    1、继承
        CSS的某些样式是具有继承性的。
        继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。
        注意有一些css样式是不具有继承性的。如border:1px solid red;
            不可继承样式:
            display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi.

    2、特殊性
        浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式
        标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。
            p{color:red;} /*权值为1*/
            p span{color:green;} /*权值为1+1=2*/
            .warning{color:white;} /*权值为10*/
            p span.warning{color:purple;} /*权值为1+1+10=12*/
            #footer .note p{color:yellow;} /*权值为100+10+1=111*/
        注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

    3、层叠
        层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
        内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

    4、重要性
        有些特殊的情况需要为某些样式设置具有最高权值,
        有些特殊的情况需要为某些样式设置具有最高权值,
        注意:!important要写在分号的前面
        浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。

八、CSS格式化排版
    1、文字排版——字体
        body{font-family:"宋体";}
        注意:
            不要设置不常用的字体
            通常“微软雅黑”
                body{font-family:"Microsoft Yahei";}或
                body{font-family:"微软雅黑";}
            注意:第一种方法比第二种方法兼容性更好一些。

    2、字号、颜色
        body{font-size:12px;color:#666}

    3、粗体
        p span{font-weight:bold;}

    4、斜体
        p a{font-style:italic;}

    5、下划线
        p a{text-decoration:underline;}

    6、删除线
         .oldPrice{text-decoration:line-through;}

    7、缩进
        p{text-indent:2em;}
        2em的意思就是文字的2倍大小。

    8、行间距(行高)
        p{line-height:1.5em;}

    9、字间距、字母间距
        设置文字间隔或者字母间隔就可以使用    letter-spacing来实现
            h1{
                letter-spacing:50px;
            }
            注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。
        单词间距设置:
            使用word-spacing来实现
            h1{
                word-spacing:50px;
            }
    10、对齐
        为块状元素中的文本、图片设置居中样式
        h1{
            text-align:center;
        }
        left、right、center
九、CSS盒模型
    1、元素分类
        html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素
        常用的块状元素:
            <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
        常用的内联元素:
            <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
        常用的内联块状元素:
            <img>、<input>

    2、块级元素(元素分类)
        设置display:block就是将元素显示为块级元素
        a{display:block;}
        块级元素特点:
            1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
            2、元素的高度、宽度、行高以及顶和底边距都可设置。
            3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
    3、内联元素(元素分类)
        块状元素也可以通过代码display:inline将元素设置为内联元素
        内联元素特点:
            1、和其他元素都在一行上;
            2、元素的高度、宽度、行高及顶部和底部边距不可设置;
            3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

    4、内联块状元素(元素分类)
        内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素
        inline-block元素特点:
            1、和其他元素都在一行上;
            2、元素的高度、宽度、行高以及顶和底边距都可设置。

    5、什么是盒模型
        盒子模型:内边距padding、外边距margin、边框border
        块标签都具备盒子模型的特性

    6、边框(盒模型)
        盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
            div{
                border:2px  solid  red;
            }
        也可分开写 :
        div{
            border-width:2px;
            border-style:solid;
            border-color:red;
        }
        注意:
            1、border-style(边框样式)常见样式有:
            dashed(虚线)| dotted(点线)| solid(实线)。
            2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
            border-color:#888;//前面的井号不要忘掉。
            3、border-width(边框宽度)中的宽度也可以设置为:
            thin | medium | thick(但不是很常用),最常还是用象素(px)。

        css样式中允许只为一个方向的边框设置样式:
            div{border-bottom:1px solid red;}

            同样可以使用下面代码实现其它三边上、右、左边框的设置:
            border-top:1px solid red;
            border-right:1px solid red;
            border-left:1px solid red;

    7、宽度和高度(盒模型)
        css内定义的宽(width)和高(height),指的是填充以里的内容范围。
        一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

    8、填充(盒模型)
        元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)
            div{padding:20px 10px 15px 30px;}
        也可以分开写:
            div{
               padding-top:20px;
               padding-right:10px;
               padding-bottom:15px;
               padding-left:30px;
            }
        上、右、下、左的填充都为10px;可以这么写
            div{padding:10px;}
        上下填充一样为10px,左右一样为20px,可以这么写:
            div{padding:10px 20px;}

    9、边界(盒模型)
        元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左
            div{margin:20px 10px 15px 30px;}
        也可以分开写:
            div{
               margin-top:20px;
               margin-right:10px;
               margin-bottom:15px;
               margin-left:30px;
            }
        如果上右下左的边界都为10px;可以这么写:
            div{ margin:10px;}
        如果上下边界一样为10px,左右一样为20px,可以这么写:
            div{ margin:10px 20px;}
        总结一下:padding和margin的区别,padding在边框里,margin在边框外。

十、CSS布局模型
    1、CSS布局模型
        CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
            在网页中,元素有三种布局模型:
            1、流动模型(Flow)
            2、浮动模型 (Float)
            3、层模型(Layer)

    2、流动模型
        流动(Flow)是默认的网页布局模式
        典型特征:
            第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置
            第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。

    3、浮动模型
        任何元素在默认情况下是不能浮动的,但可以用CSS定义为浮动,如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示
        div{
            width:200px;
            height:200px;
            border:2px red solid;
            float:left;
        }
        <div id="div1"></div>
        <div id="div2"></div>
        右浮动:float:right;
        一左一右:#div1{float:left;}   #div2{float:right;}

    4、什么是层模型
        CSS定义了一组定位(positioning)属性来支持层布局模型。
        层模型有三种形式:
            1、绝对定位(position: absolute)
            2、相对定位(position: relative)
            3、固定定位(position: fixed)

    5、绝对定位(层模型)
        想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

        如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。
        div{
            width:200px;
            height:200px;
            border:2px red solid;
            position:absolute;
            left:100px;
            top:50px;
        }
        <div id="div1"></div>

    6、相对定位(层模型)
        想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

        如下代码实现相对于以前位置向下移动50px,向右移动100px;
        #div1{
            width:200px;
            height:200px;
            border:2px red solid;
            position:relative;
            left:100px;
            top:50px;
        }
        <div id="div1"></div>

    7、固定定位(层模型)
        fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed?属性功能相同

    8、Relative与Absolute组合使用
        使用position:absolute可以实现被设置元素相对于浏览器(body)
        相对于其它元素进行定位
            使用position:relative来帮忙,但是必须遵守下面规范:
        1、参照定位的元素必须是相对定位元素的前辈元素:
            <div id="box1"><!--参照定位的元素-->
                <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
            </div>
        box1是box2的父元素(父元素当然也是前辈元素了)。
        2、参照定位的元素必须加入position:relative;
            #box1{
                width:200px;
                height:200px;
                position:relative;        
            }
        3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
            #box2{
                position:absolute;
                top:20px;
                left:30px;         
            }

十一、CSS代码缩写(占用更少的带宽)
    1、盒模型代码简写
        盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。
            margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
        通常有下面三种缩写方法:
            1、如果top、right、bottom、left的值相同,如下面代码:
                margin:10px 10px 10px 10px;
            缩写为:
                margin:10px;
            2、如果top和bottom值相同、left和 right的值相同,如下面代码:
                margin:10px 20px 10px 20px;
            缩写为:
                margin:10px 20px;
            3、如果left和right的值相同,如下面代码:
                margin:10px 20px 30px 20px;
            缩写为:
                margin:10px 20px 30px;
            注意:padding、border的缩写方法和margin是一致的。
    2、颜色值缩写
        当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
            p{color:#000000;}
        缩写为:
            p{color: #000;}

        p{color: #336699;}
        缩写为:p{color: #369;}

    3、字体缩写
        body{
            font-style:italic;
            font-variant:small-caps;
            font-weight:bold;
            font-size:12px;
            line-height:1.5em;
            font-family:"宋体",sans-serif;
        }
        缩写为:
        body{
            font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
        }

        注意:
        1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
        2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。