首页 > > 网页制作 > css >

CSS

2018-06-24 01:56:37来源：未知阅读 ()

CSS的四种引入方式：

一、行内样式

<div style="background-color: blue;color: brown">cairui</div>

二、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: blue;
            color: darkgoldenrod;
        }
    </style>
</head>
<body>
     <p>cai</p>
    <div>rui</div>
</body>
</html>

三、写一个css文件，把内容放在里面引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "1.css";
    </style>
</head>
<body>
     <p>cai</p>
    <div>rui</div>
</body>
</html>

四：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
     <p>cai</p>
    <div>rui</div>
</body>
</html>

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #www{
            background-color: chartreuse;
            color: brown;
        }
    </style>
</head>
<body>
     <p id="www">cai</p>
    <div>rui</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .www{
            background-color: chartreuse;
            color: brown;
        }
    </style>
</head>
<body>
     <p class="www">cai</p>
    <div>rui</div>
</body>
</html>

id是唯一的（类似身份证），class是可重复的

组合选择器：

E,F　　多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p,div{
            background-color: chartreuse;
            color: brown;
        }
    </style>
</head>
<body>
     <p class="www">cai</p>
    <div>rui</div>
</body>
</html>

E F　　后代元素选择器，匹配所有属于E后代的F元素，E和F之间用空格分隔

E>F　　子元素选择器，匹配所有E元素的子元素F

E+F　　毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

伪类选择器：

专用于控制链的显示效果，伪类选择器：

　　a:link（没有接触过的链接），用于定义链接的常规状态

　　a:hover（鼠标放在链接上的状态），用于产生视觉效果

　　a:visited（访问过的链接），用于阅读文章，能清楚的判断已经访问过的链接

　　a:active（在链接上按下鼠标时的状态），用于表现鼠标按下时的链接状态

伪类选择器：伪类指的是标签的不同状态：

　　a ==>点过的状态没有点过的状态鼠标悬浮状态激活状态

　　 a:link{color:#FF0000}/*未访问的链接*/

　　 a:visited{color:#00FF00}/*已访问的链接*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: red;
        }
        a:hover{
            color: chartreuse;
        }
        a:visited{
            color: darkgray;
        }
        a:active{
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">点击</a>
</body>
</html>

CSS的属性：

1、颜色属性

<div style="color: red">cairui</div>

<div style="color: #00bFFF">cairui</div>

2、字体属性

font-size: 50px;

font-family: 宋体;

font-weight: 100;    #加粗

3、背景属性

background-color: red;

background-image: url("task.PNG");    #背景图片

background-repeat: no-repeat;    #背景图片不重复

background-position: right top;    #背景图片所在的位置

4、文本属性

font-size: 10px;

text-align: center;横向排列

line-height: 200px；文本行高，通俗讲，文字高度加上文字上下的空白区域的高度50%；基于字体大小的百分比

text-indent: 150px;首行缩进，50%；基于父类（weight）的百分比

letter-spacing: 10px;

5、边框属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 50px;
            background-color: red;
            border-style: solid;    #边框为实线边框
            border-color: blue;     #边框颜色
            border-width: 20px;     #边框高宽

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

6、列表属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style: decimal-leading-zero;   #01,02,03开头
            list-style: none;   #去掉开头的样式
            
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

7、dispaly属性

none
block
inline

改变一个文本是块级标签还是内联标签。还有none是使其消失。

8、盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: darkgray;
            width: 300px;
            border:25px solid green;    #边框
            padding: 25px;      #内边距
            margin: 25px;       #外边距

        }

    </style>
</head>
<body>
    <div>内容</div>
</body>
</html>