CSS初步2

来源：互联网发布：网络黄金黄金裴蕾编辑：程序博客网时间：2024/06/06 19:53

CSS初步2（块，行内元素）（三大特性）

CSS初步2块行内元素三大特性
- 1标签的分类
  - 11块元素
  - 12行内元素
  - 13行内块元素内联元素
- 2块元素和行内元素的转换
  - - 21块元素和行内元素的相互的转换
    - 22行内元素和块元素的转换
  - 23块和内元素相互转化为行内快元素
- 3CSS的三大特性
  - 31层叠性
  - 32继承性
  - 33优先级
- 4伪类链接
- 五背景属性

(1)标签的分类

（1.1）块元素

典型的代表Div,h1-h6,p,ul,li

特点: ★独占一行

★可以设置宽高

★嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        div{            height:200px;            width:500px;            background-color: red;        }        p{            height:200px;            background-color: green;        }        div.div1{            height: 200px;            width: 500px;            background-color: #888;        }        .div1 .p1{            height: 100px;            background-color: red;        }    </style></head><body>    <div>黄河的html5</div>    <p>湖北省孝感市孝南区</p>    <div class="div1">        <p class="p1"></p>    </div></body></html>

（1.2）行内元素

<span></span><a href="#">黄河</a><strong></strong>

典型代表 span ,a, ,strong , em, del, ins

特点：★在一行上显示

★不能直接设置宽高

★元素的宽和高就是内容撑开的宽高（一个汉字是16PX）

（1.3）行内块元素（内联元素）

典型代表 input img

特点：★在一行上显示

★可以设置宽高

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        img{            width: 300px;        }        input{            width: 300px;            height: 200px;            background-color: red;        }    </style></head><body>    <img src="images/a.jpg" alt=""><input type="text" name=""></body></html>

（2）块元素和行内元素的转换

（2.1）块元素和行内元素的相互的转换

display: inline;

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        div,p{            display: inline;        }    </style></head><body>    <div>湖北省孝感市</div>    <p>陕西省西安市</p></body></html>

（2.2）行内元素和块元素的转换

display:block;

（2.3）块和内元素相互转化为行内快元素

display:inline-block;

（3）CSS的三大特性

（3.1）层叠性

当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .box2{            font-size: 40px;            color: red;        }        .box{            font-size: 80px;            color: red;        }    </style></head><body>    <div class="box box2">huangeh</div></body></html>

这个代码执行的结果就是.box的css的样式代码执行的结果

（3.2）继承性

继承性发生的前提是包含（嵌套关系）

★文字颜色可以继承

★文字大小可以继承

★字体可以继续

★字体粗细可以继承

★文字风格可以继承

★行高可以继承

总结：文字的所有属性都可以继承

◆特殊情况：

h系列不能继承文字大小。但是可以继承的是文字的颜色

a标签不能继承文字颜色。但是可以继承文字的大小

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .father{            color:red;            font: italic 700 40px microsoft yahei;        }        .box{            font-size: 30px;            color:yellow;        }    </style></head><body>    <div class="father">        <p>14期威武</p>    </div>    <div class="box">        <h1>14期威武</h1>        <h2>14期威武</h2>        <p>14期霸气</p>    </div>    <div class="box">        <a href="#">14期高薪</a>    </div></body></html>

（3.3）优先级

默认样式<标签选择器<类选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    #con{            color: pink;            font-size:100px;        }    .box{            color:green;            font-size: 60px;        }    div{            color:red !important;            font-size:60px !important;        }    </style></head><body>    <div class="box" id="con" style="font-size:12px; color:yellow;">14期威武</div></body></html>

优先级的特点：

(1)继承的权重为0;(当它自己没有定义样式的时候，它的样式是继承他父类的。但是它自己有了不管他的权重为什么，他都是用他自己的)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .father{            font-size: 60px;            color: red;        }        p{            font-size: 20px;            color: blue;        }        #box{            font-size: 90px;            color:green;        }    </style></head><body>    <div class="father" id="box">        <p>14期威武</p>    </div></body>

最终这个代码显示的是蓝色字体20px;

(2)继承的权重会出现叠加

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">       p.son{            font-size: 120px;            color: yellow;        }        p{                font-size:30px;            color:red;        }        .father .son{                    font-size:500px;            color: pink;        }        .son{            font-size: 60px;            color: blue;        }        .father #baby{            font-size:12px;            color: orange;        }    </style></head><body>    <div class="father">        <p class="son" id="baby">14期威武</p>    </div></body></html>

（4）伪类链接

a:link{属性:值;}  a{属性:值}效果是一样的a:link{属性:值;}       链接默认状态   a:visited{属性:值;}     链接访问之后的状态 a:hover{属性:值;}      鼠标放到链接上显示的状态    a:active{属性:值;}      链接激活的状态  ：focus{属性:值；}     获取焦点

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        /*a:link{            color: red;        }*/        /*链接默认状态*/        a{            color: red;            text-decoration: none;        }        /*链接访问之后的状态*/        a:visited{            color: green;        }        /*鼠标放到链接上显示的状态*/        a:hover{            color: blue;            text-decoration: line-through;        }        /*链接激活的状态*/        a:active{            color: pink;        }    </style></head><body>    <a href="#">14期霸气</a></body></html>

文本修饰属性

text-decoration:none | underline | line-through

（五）背景属性

background-color 背景颜色 background-image：url(“1.jpg”) 背景图片 background-repeat|no-repeated|repeated-x|repeated-y 背景平铺 background-position left|right|center|top|bottom 背景定位 background-position:right 方位写一个的时候，另外的默认居中 background-position:right bottom 写2个方位值的时候，顺序没有要求 background-position:20px 30px 写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向 Background-attachment 是否滚动 scroll fixed(就是以浏览器进行定位的) background:red url(“1.jpg”) no-repeated 30px 40px scroll; 背景属性的连写

未完待续。。。。。。。。。。。。

阅读全文

0 0