DIV和CSS

来源：互联网发布：聚合物水泥防水涂料js 编辑：程序博客网时间：2024/06/05 09:13

1、Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合 CSS 来使用。它主要用于页面的布局。
Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合 CSS 来使用。它主要用于对括起来的内容进行样式的修饰。
CSS指层叠样式表，它是对整个网站骨架的内容进行美化。
2、使用
语法和规范：

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

2.1、CSS的选择器
2.1.1、元素选择器

元素名{    属性名 1:属性值 1;    属性名 2:属性值 2;    属性名 3:属性值 3;}

如果多个相同的元素设置相同的样式，使用此种方式最为合适。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            div{                font-size: 50px;                color: pink;            }        </style>    </head>    <body>        <div>            11111        </div>        <div>            22222        </div>    </body></html>

2.1.2、类选择器

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

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

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            .divc{                font-size: 50px;                color: gold;            }        </style>    </head>    <body>        <div class="divc">            11111        </div>        <div>            22222        </div>        <div class="divc">            33333        </div>    </body></html>

2.1.3、ID选择器

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

Id 保证唯一。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            #divid{                font-size: 50px;                color: yellow;            }        </style>    </head>    <body>        <div class="divc">            11111        </div>        <div id="divid">            22222        </div>        <div class="divc">            33333        </div>    </body></html>

2.1.4、层级选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            div p{                font-size: 50px;                color: green;            }        </style>    </head>    <body>        <div>            <p>                11111            </p>        </div>        <div id="divid">            22222        </div>        <div class="divc">            33333        </div>    </body></html>

2.1.5、属性选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <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></html>

2.2、CSS的引入方式
2.2.1、内部引入方式

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            div{                font-size: 50px;                color: green;            }        </style>    </head>    <body>        <div>            11111        </div>        <div>            22222        </div>        <div>            33333        </div>    </body></html>

2.2.2、行内引入方式

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            div{                font-size: 50px;                color: green;            }        </style>    </head>    <body>        <div>            11111        </div>        <div>            22222        </div>        <div style="font-size: 20px; color: pink;">            33333        </div>    </body></html>

2.2.3、外部引入方式

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" href="stylecss.css" type="text/css"/>    </head>    <body>        <div>            11111        </div>        <div>            22222        </div>        <div>            33333        </div>    </body></html>

stylecss.css文件

div{    font-size: 50px;    color: green;}

2.3、CSS 的浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

float: left;

清除浮动：

clear: both;

2.4、盒子模型
内容(content)，内边距（padding），边框（boder），外边距（margin）。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。而默认情况下，内边距、边框和外边距的值均为 0。

#one{    border: 1px solid red;    width: 300px;    height: 150px;    float: left;}

padding-top: 20px;

设置外边距去居中：

margin: auto;

2.5、其他
一行显示列表标签：

ul li {    display: inline;}

设置字体大小：

style="font-size: 20px;"

让块级元素文本内容居中：

text-align: center;

去掉超链接的下划线：

a{    text-decoration: none;}

阅读全文

0 0