2--DIV CSS基础

1.DIV CSS样式

CSS指的是层叠样式表(Cascading Style Sheets),也称级联样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素,可以同时控制多张网页的布局。

DIV是HTML的一个标签,CSS是一个样式表。

2.样式表类型

2.1 嵌入样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .嵌入样式{
                color: blue;
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="嵌入样式">
            文本内容1
        </div>
            
    </body>
</html>

2.2 外部样式

建立外部css文件1并引入

<link rel="stylesheet" href="css/外部样式.css" />

外部css文件1还可以引入外部css文件2

@import url("外部样式+.css");
.嵌入样式{
                color: blue;
                width: 100px;
                height: 100px;
                background: red;
            }

2.3 内联样式

<div style="color: red;width: 100px;height: 100px;background: blue;">
            文本内容2
</div>

 3.注释

/*  注释内容  */

4.样式选择器

 CSS选择器用于查找(或选取)要设置样式的HTML元素

4.1 元素选择器

元素选择器根据元素名称来选择HTML元素

p{
                color: red;
                text-align: center;
            }

<p>元素选择器</p>
div{
                color: red;
                text-align: center;
            }

<div>元素选择器</div>

4.2 ID选择器

ID 选择器选择有特定id属性的HTML 元素

#part1{
                color: blue;
                text-align: center;
            }

<p id="part1">ID选择器</p>

4.3 类选择器

类选择器选择有特定 class 属性的 HTML 元素

.part2{
                color: black;
                text-align: center;
            }

<p class="part2">类选择器</p>

4.4 通用选择器

通用选择器(*)选择页面上的所有的 HTML 元素

*{
                color: brown;
                text-align: left;
            }

4.5 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素

h1,h2{
                color: pink;
                text-align: left;
            }

5.背景

CSS 背景属性用于定义元素的背景效果

body{
                background: url(img/txt.jpg) no-repeat scroll;
            }

 

background-color:规定要使用的背景颜色

background-position:规定背景图像的位置

background-size:规定背景图片的尺寸

background-origin:规定背景图片的定位区域

background-image:规定要使用的背景图像

background-clip:规定背景的绘制区域

 

background-repeat:规定如何重复背景图像

repeat(默认):背景图像在垂直方向和水平方向重复

repeat-x:背景图像在水平方向重复

repeat-y:背景图像在垂直方向重复

no-repeat:背景图像仅显示一次

inherit:规定应该从父元素继承 background 属性的设置

 

background-attachment:规定背景图像是否固定或者随着页面的内容滚动

background-attachment:fixed:固定,不随内容的滚动而滚动

background-attachment:scroll:滚动,随内容的滚动而滚动

6.边框

CSS 边框属性用于指定元素边框的样式、宽度和颜色

.part3{
                width: 200px;
                height: 200px;
                border: solid 50px red;
            }

 

边框样式值:none,hidden,dotted,dashed,solid,double

border-left:设置左边框,一般单独设置左边框样式使用

border-right:设置右边框,一般单独设置右边框样式使用

border-top:设置上边框,一般单独设置上边框样式使用

border-bottom:设置下边框,一般单独设置下边框样式使用

7.文字属性

color:文字颜色

font-size:文字大小

font-weight:文字粗细

font-family:文字字体

font-variant:字体变体(small-caps)

  small-caps:小写字母转换为大写字母

8.文本属性

text-align:文本对齐(right/left/center)

letter-spacing::字间距

text-indent:首行缩进

line-height:行间距

text-decoration:文本线(none/underline/overline/line-through)

  underline:定义文本上的下划线

  overline:定义文本上的上划线

  line-through:定义文本上的中划线

 

热门相关:有个人爱你很久   万古至尊   修真界败类   万古至尊   富贵不能吟