您的位置：首页 > Web前端 > CSS

02.WEB-HTML之DIV+CSS学习总结

2018-01-08 08:55 477 查看

一 div相关技术:

1.1 div就是html一个普通标签,进行区域划分.特性: 独自占一行.独自不能实现复杂效果,必须结合CSS样式进行渲染.

div通常是块级元素 它主要用于页面的布局。

<div>可定义文档中的区域或节(division/section)

<div>标签可以把文档分成独立的,不同部分.他可以用作严格的组织工具,并且不使用任何格式与其关联.

如果用 id 或者 class 来标记<div>,那么该标签的作用将会变得更有效.

1.2 Span它是一个html标签，一个内联元素(显示一行)。
它单独使用没有任何意义， 必

须结合CSS来使用。 它主要用于对括起来的内容进行样式的修饰。

二 CSS相关知识

2.1 什么是CSS?

CSS指层叠样式表(Cascading Style Sheets)
样式定义如何显示HTML元素
样式通常存在样式表中
把样式添加到HTML4.0中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式通常存储在CSS文件中
多个样式可以层叠为一

2.2 CSS的作用?

     HTML:他是整个网站的骨架

     CSS:他是对整个网站骨架进行美化(修饰)

2.3 CSS如何使用?

语法和规范

选择器{
   属性名 1:属性值1;
   属性名 2:属性值2;
   属性名 3:属性值3;

}

2.4 CSS的引入方式:

2.4.1 行内引入
<div style="color:red;font-size: 100px;">
JavaEE就业班
</div>
2.4.2 内部引入
<style type="text/css">
div{
color:red;
font-size: 100px;
}
</style>
2.4.3 外部引入



 



如果<style type=”text/css”></style> 可以省略不写,因为他的默认值就是 text/css
优先级问题:
谁离需要修饰的元素近，谁的样式生效，其它的被覆盖掉。 (就近原则)

2.5选择器

 要想将CSS样式用于特定的HTML元素,首先要找到该目标元素,在CSS中,执行这一样式规则的部分被称为选择器.

2.5.1 元素选择器:
标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式.其基本如法如下:

标记名{
属性名 1:属性值1;
属性名 2:属性值2;
属性名 3:属性值3;

}

该语法中,所有的HTML标记名都可以作为标记选择器,例如body,h1,p,strong等,用标记选择器定义的样式对页面中该类型的所有标记都有效

div{
font-size: 30px;
color: pink;
}
<h>
成熟时给陌生人看的
</h>
 
  
  
优点:快速为页面中同类型的标记统一样式

缺点:不能设置差异化样式

2.5.2  ID选择器
id选择器使用"#"进行标识,后面紧跟id名,其基本语法如下:

#id 属性名{
属性名 1:属性值1;
属性名 2:属性值2;
属性名 3:属性值3;

}

该语法中,id即为HTML元素的id属性值,大多数HTML都可以定义id属性,元素的id值是唯一的,只能对应文档中某一个具体的元素.

#div5{
font-size: 30px;
color: yellow;
}

<div id="div5">
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
</div>


2.5.3 类选择器
类选择器用"."(英文点号)进行标识,后面紧跟类名,其基本语法如下:

.类名{
属性名 1:属性值1;
属性名 2:属性值2;
属性名 3:属性值3;

}
对多个元素设置相同的样式，此时使用类选择器比较合适。

该语法中,类名即为HTML元素的class属性值,大多数HTML都可以定义class属性,类选择器最大的优势是可以为元素对象定义单独或者相同的样式:

<style>
.div2{
font-size: 30px;
color: gold;
}
</style>
</head>
<body>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
</div>
<div class="div2">
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
</div>
<div class="div2">
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
</div>
</body>



2.5.4 属性选择器
属性选择器,在标签后面使用括号标记,其基本语法格式如下:

标签名[标签属性 = '标签属性值']{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

该选择器,是对"元素选择器"的扩展,对一组标签进一步过滤

<style>
input[type='text']{
background-color: red;
}

input[type='password']{
background-color: blue;
}
</style>
</head>
<body>
用户名；<input type="text" name="username"/><br />
密码：<input type="password" name="password"/>
</body>



2.5.5 包含选择器
包含选择器,两个标签之间使用空格,给指定父标签的后代标签设置样式,可以方便在区域内设置样式.

父标签 后代标签{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

该选择器是对"元素选择器"的扩展,对一个内部所有后代标签进行过滤.

<style>
div p{
font-size: 30px;
color: green;
}
</style>
</head>

<body>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
</div>
<div>
<p>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
</p>
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
</div>
<p>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！66
</p>
</body>
效果:



2.6 CSS的样式
2.6.1 边框和尺寸:border width height
border  设置边框的样式
            样式 : 宽度 样式 颜色

            例如:

style = "border:1px solid #f00"
           1像素实边红色.   样式取值:solid 实线; none 无边; double 双线等

width height :用于设置标签的宽度 高度        
2.6.2 布局 float clear
     CSS的浮动   选择器{ float :属性值;}

      常用属性值:  left: 元素向左浮动;    right: 元素向右浮动;  none:元素不浮动(默认值)

     由于浮动元素不再占用原文档流的位置,所以他会对页面中的其他元素的排版产生影响,如果要避免影响,就要用clears属性进行清除浮动.

选择器{ clear :属性值;}

常用属性值: left: 不允许左侧有浮动元素(清除左侧浮动的影响)   right: 不允许右侧有浮动元素(清除右侧浮动的影响) 

                  both: 同时清除左右两侧浮动的影响.

2.6.3 转换 display
HTML提供了丰富的标签,这些标签被定义成了不同的类型,一般分为:块标签和行内标签

块标签 以区域块方式出现.每个块标签独自占一整行或者多整行;
                     常见块元素: <h1>  <div> <ul>等

行内标签   
不必在新的一行开始,同时也不强迫其他元素在新的一行显示
                     常见的行内元素: <span> <a>等

在开发中,希望行内元素具有块元素的特性,需要使用display进行转换

选择器{display :属性值}

常用的属性值: 

          inline   此元素将显示为行内元素(行内元素默认的display属性)

          block    此元素将显示为块元素(块内元素默认的display属性)

          inline-block    将对象呈现为内联对象,但是对象的内容作为块对象呈递

          none     此元素将被隐藏,不显示,也不占用页面空间

2.6.4 字体 color  font-size
color 颜色 字体颜色

2.6.5  背景颜色 background-color
2.7 CSS盒子模型
2.7.1 什么是盒子模型?
CSS框模型(Box Model)规定了元素框处理元素内容,内边距,外框和外边距的方式



2.7.2 内边距 padding
    例如:如果您希望所有h1元素的各边都有10像素的内边距,你可以这样设置:h1 {padding:10px;}    你还可以按照上,右,下,左的顺序分别设置各个边距;各边均可以使用不同的单位或者百分比值:
h1 {padding:10px 0.25em 2ex 20%}
    单边内边距属性:  padding-top padding-right padding-bottom padding-left
2.7.3 边框 border
    border-top-style    border-right-style    border-bottom-style    border-left-style

2.7.4 外边距  margin
    margin-top    margin-right    margin-bottom    margin-left
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航