HTML 基础 2

1. 认识CSS样式:

    CSS:层叠样式表(Cascading Style Sheets),主要用于定义HTML内容在浏览器内的显示样式

    语法:

        选择符{ 属性: 值}

    举例:

        p{ color: blue}

    选择符:又称选择器,指明要应用样式规则的元素,如<html>、<body>、<h1>、<p>、<img>...

    声明:指的是冒号”:“

    多条声明:使用分号”;“隔开,最好每行都加上分号

    注释:CSS使用 /**/,HTML注释则使用<!--内容-->



2. CSS样式分类:

    1. 内联式

        <p style="color:red;font-size:12px">这里文字是红色。</p>

    2. 嵌入式

        较通用的一类,CSS样式放置在<style>标签中,而<style>通常要放置在<head>内

        <style type="text/css">

            span{

               color:blue;

               font-size:12px;

            }

        </style>

    3. 外部式

        把CSS代码写到一个单独的外部文件中,以.css扩展名结尾,在<head>内使用<link>标签引入,如:

        <link href="base.css" rel="stylesheet" type="text/css" />

        href: .css文件路径

        rel和type: rel="stylesheet" type="text/css" 是固定写法,不能改

    三种方法的优先级:

        内联式 > 嵌入式 > 外部式

        就近原则,嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面

        以上规则适用于相同权值的情况

3. CSS 类选择器

    语法:

        .类选器名称{css样式代码;}

    举例:

        <style type="text/css">

        .stress{

            color:red;

        }

        </style>

    注意:前边的小圆点是必须要有的

    使用:

        <span class="stress">胆小如鼠</span>

4. CSS ID选择器

    语法:

        #ID选择器名称{css样式代码}

    举例:

        #setGreen{color:green;}

        <span id="setGreen">胆小如鼠</span> 

    区别:

        起始于 '.' 与 '#'

        调用时 class= 与 id= 

        ID选择器只能在文档中使用一次,类选择器则可以使用多次

        一个元素可以使用多个类选择器同时设置多个样式,而ID选择器是不可以的,如 <span class="stress bigsize">三年级</span>

5.CSS 子选择器

    还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。举例:

        .food>li{border:1px solid red;}

    若大于符号换成空格( ),用于选择指定标签元素的所有后辈元素,举例:

        .first span{border:1px solid red;}



6. CSS 通用选择器

    通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素:

        * {color: red;}

    此时,所有元素的字体都为红色



7. CSS 伪类选择符

    伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色

        a:hover{color:red;}

    此时,把鼠标放置到元素上边,颜色就会切换为红色



8. CSS 分组选择符

    多个标签使用逗号隔开:

        h1,span{color:red;}

    相当于:

        h1{color:red;}

        span{color:red;}



9. CSS 继承

    CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代

    如:

        p{color:red;} /*可被span继承*/

        p{border:1px solid red;} /*此时,span将不继承,边框显示红色*/



10. CSS 特殊性(权值)

    权值:

        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,所以可以理解为继承的权值最低。

    层叠:

        相同权值时,最后一个将被应用

    重要性:

        相同权值时,使用 !important 将得到最高权重,如 p{color:red!important;}

        样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,使用 !important 优先级比 用户自己设定 还高



11. CSS 文字排版

    1. 字体

        body{font-family:"宋体";}

        body{font-family:"Microsoft Yahei";}

    2. 字号,颜色

        body{font-size:12px;color:#666}

    3. 粗体

        p span{font-weight:bold;}

        a{font-weight:bold;}

    4. 斜体

        p a{font-style:italic;}

        p{font-style:italic;}

    5. 下划线

        p a{text-decoration:underline;}

    6. 删除线

        .oldPrice{text-decoration:line-through;}

    7. 缩进

        p{text-indent:2em;} /*2em 表示两倍文字大小*/

    8. 行间距

        p{line-height:1.5em;}

    9. 字间距、字母间距

        h1{letter-spacing:50px;word-spacing:50px;} /*分别是字母、单词间距*/

    19.对齐

        h1{text-align:center;} /*left、right和center*/



12. CSS 元素分类

    块状元素:

        <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

    内联元素:

        <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

    内联块状元素:

        <img>、<input>



    1. 块状元素:

        1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

        2、元素的高度、宽度、行高以及顶和底边距都可设置。

        3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

        注意:a{display:block;} /*可以把内联元素 a 转换为 块状元素*/

    2. 内联元素:

        1、和其他元素都在一行上;

        2、元素的高度、宽度、行高及顶部和底部边距不可设置;

        3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

        注意:display:inline 可以转换成内联元素

    3. 内联块状元素:

        1、和其他元素都在一行上;

        2、元素的高度、宽度、行高以及顶和底边距都可设置。

        注意:display:inline-block 可以转换成内联块状



13. CSS 盒模型

    1. 边框

        div{ border:2px  solid  red;}

        相当于:

        div{

            border-width:2px;

            border-style:solid;

            border-color:red;

        }

        border-style: dashed(虚线)| dotted(点线)| solid(实线)

        border-color:#888;    //前面的井号不要忘掉。

        border-width: 有 thin | medium | thick(但不是很常用),最常还是用象素(px)

    2. 上下左右边框:

        div{border-bottom:1px solid red;} /*top、bottom、left和right*/

    3. 高度和宽度

        div{

            width:200px;    /*宽度*/

            height:30px;    /*高度*/

            padding:20px;   /*元素到边框的距离,又名为“填充”*/

            border:1px solid red;

            margin:10px;    /*两盒子距离,又名为“边界”*/

        }



14. CSS 布局模型

    元素有三种布局模型:

    1、流动模型(Flow)

        网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的

        第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%

        第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示

    2、浮动模型 (Float)

        现在我们想让两个块状元素并排显示

        任何元素在默认情况下是不能浮动的,但可以用CSS定义为浮动,如div、p、table、img等元素都可以被定义为浮动

        举例:

            #div1{float:left;}

            #div2{float:right;}

    3、层模型(Layer)

        就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧

        层模型有三种形式:

            1、绝对定位(position: absolute)

                需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来

                然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位

                如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

                举例:

                    div{

                        xxxx:yyyy;

                        position:absolute;

                        right:100px;

                        top:20px;

                    }

            2、相对定位(position: relative)

                position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置

                相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),

                然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动

                举例:

                    #div1{

                        width:200px;

                        height:200px;

                        border:2px red solid;

                        position:relative;

                        left:100px;

                        top:50px;

                    }                    

                    <div id="div1"></div>

            3、固定定位(position: fixed) 如弹窗广告

                fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身

                它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,

                因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响

                举例:

                    #div1{

                        width:200px;

                        height:200px;

                        border:2px red solid;

                        position:fixed;

                        left:100px;

                        top:50px;

                    }

            Relative与Absolute组合使用:

                1、参照定位的元素必须是相对定位元素的前辈元素

                <div id="box1"><!--参照定位的元素(前辈)-->

                    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->

                </div>

                2、参照定位的元素必须加入position:relative;

                #box1{

                    width:200px;

                    height:200px;

                    position:relative;        

                }

                3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了

                #box2{

                    position:absolute;

                    top:20px;

                    left:30px;         

                }



15. 代码简写:

    1. 盒模型:    

        margin:10px; 相当于 margin:10px 10px 10px 10px; (上右下左顺序)

        margin:10px 40px; 相当于 margin:10px 40px 10px 40px; (上右 下左顺序)

        padding, border和 margin是一致的;

    2. 颜色值:

        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 属性,其他的属性未指定将自动使用默认值。

            2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。



16. 长度值

    1. 像素

        像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)

    2. em

        假定 font-size设定 14px,那么 1em=14px

    3. 百分比

        p{font-size:12px;line-height:130%}

你可能感兴趣的:(html)