css入门

最新推荐文章于 2024-07-12 20:49:16 发布

ll_best

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量348

点赞数 1

分类专栏： html 文章标签： css

本文链接：https://blog.csdn.net/ll_best/article/details/73850655

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 定义
CSS（Cascading Style Sheet 层叠样式表）简称，样式。
主要负责网页的美观。
2 css的使用方式
1）行内样式
注意：
1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式
超链接
2）内部样式
注意：
1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用

        <style type="text/css">
            a{
                font-size:24px;
                color:#0F0;
            }
        </style>

3）外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件

            <!-- 导入外部css文件
                href  : 表示外部css文件的位置
                rel: 表示关联的是样式表
            -->
            <link href="01.css" rel="stylesheet"/>

2 CSS语法

a{
    font-size:24px;
    color:#F00;
    }

选择器（selector）：使用选择器来选择需要添加样式的标签。
CSS属性（property）：给选择的标签添加什么样式。例如，字体大小，颜色，背景…..
CSS值（value）：添加样式的具体值。12px , 红色，背景图片….

2.1 选择器
(1)标签选择器
作用：选择同名的标签

div{
    font-size:24px;
    color:#F00; 
    }

注意：选择到所有同名的标签
(2)类选择器
作用：选择同类的标签

    /*类选择器*/
        .c1{
            font-size:24px;
            color:#F00; 
        }

注意：
1）选择的标签必须有class的属性。同类的标签使用同名
2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先
(3)id选择器
作用：选择一个标签

#d1{
    font-size:24px;
    color:#0F0;
    }

注意：
1）选择的标签必须有id属性。
2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById(“id属性值”)
3）id选择器的优先级最高！

(4)并集选择器

/*并集选择器*/
        .c1,#d1{
            font-size:24px;
            color:#0F0;
            }

作用：当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。

(5)交集选择器

/*交集选择器
        div里面的span标签
        */
        .c1 span{ 
            font-size:24px;
            color:#0F0;
        }

作用：选择某个选择器中的子标签。

(6)通用选择器

/*通用选择器*/
    *{
        font-size:24px;
        color:#0F0;
    }

作用；选择所有的标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*标签选择器*/
div{
            font-size:24px;
            color:#F00; 
        }
/*类选择器*/
.cc{
    font-size:36px;
    color:#039}
/*id选择器*/
#dd{
    font-size:15px;
    color:#90F
    }
    /*并集选择器*/
.cc,#d2{
    font-size:18px;
    color:#F00}
    /*交集选择器*/
div span{
    font-size:larger}
</style>
</head>

<body>
<div class="cc" id="dd">div1</div>
<div class="cc">div2</div>
<div id="d2">div3</div>
<div>div4</div>
<div><span>div中的span标签</span></div>
</body>
</html>

这里写图片描述
(7)伪类选择器
作用：控制标签在不同状态下的样式。

    标签有四种状态：
            link: 没有访问过的状态
            hover: 鼠标经过的状态
            active:鼠标激活（按下但没有松开）的状态
            visited: 已经被访问过的状态（鼠标点下且松开）

注意：
1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有
效的。
正确顺序： link visited hover active

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a:link{
    font-size:12px;
    color:#0F0;
    text-decoration:underline}
a:visited{
    font-size:18px;
    color:#F00;
    text-decoration:line-through
    }
a:hover{
    font-size:24px;
    color:#00C;
    text-decoration:blink
    }
a:active{
    font-size:36px;
    color:#C0F;
    text-decoration:overline
    }
</style>
</head>

<body>
<a href="http://www.baidu.com">去到百度</a>
</body>
</html>

2.2 CSS文本属性和值

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css文本</title>
<style type="text/css">

    body{
        /*color：颜色*/
        color:#F00;
        /*字符间距*/
        letter-spacing:10px;
        /*对齐方式*/
        text-align:center;
        /*文本修饰  下划线-underline，  中划线(line-through)   上划线-overline  没有:none*/
        text-decoration:line-through;
        /*单词间距*/
        word-spacing:30px;
    }
</style>
</head>

<body>
今天 天气 不错！
</body>
</html>

这里写图片描述
2.3CSS字体属性和值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"> 
div{
    font-size:24px;
    font-family:"微软雅黑 Light";
    font-style:italic;
    font-weight:bold;
    }
</style>
</head>

<body>
<div>这是一个文本</div>
</body>
</html>

这里写图片描述

2.4 CSS背景属性和值

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css背景</title>
    <style type="text/css">

        body{
            /*背景颜色*/
            /*
            background-color:#0CF;
            */
            /*背景图片*/
            /*
            background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);
            */
            /*设置背景图片是否重复，或如何重复
                not-repeat: 不重复
                repeat-x: x轴重复
                repeat-y: y轴重复
                repeat: x和y轴重复(默认)
            */
            /*
            background-repeat:no-repeat;
            */
            /*设置背景的起始位置*/
            /*
            background-position:top center;
            */
            /*简写属性*/
            background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;

        }
    </style>
    </head>

    <body>
    </body>
    </html>

这里写图片描述
2.5 css边框属性和值
CSS边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css边框</title>
<style type="text/css">
    div{
        /*边框颜色*/
        /*简写属性
          1) 默认设置方向属性： 上 右 下 左
          2）如果当前方向没有设置颜色，那么取对面的颜色
        */
        /*
        border-color:#F00;
        */
        /*
        border-left-color:#F00;
        border-right-color:#0F0;
        border-top-color:#00F;
        border-bottom-color:#C90;
        */

        /*边框宽度*/
        /*简写属性

        */
        /*
        border-width:10px;
        */
        /*
        border-left-width:10px;
        border-right-width:20px;
        border-top-width:30px;
        border-bottom-width:40px;
        */

        /*边框样式(注意： 边框只有加了border-style才会显示出来)
        solid: 单实线
        dashed:虚线
        dotted: 点
        double: 双实线
        */

        /*简写属性*/
        /*
        border-style:solid;
        */

        /*
        border-left-style:solid;
        border-right-style:dashed;
        border-top-style:dotted;
        border-bottom-style:double;
        */

        /*所有边框属性的简写属性*/
        border:2px solid #F00;
    }
</style>
</head>

<body>
<div>div1</div>
</body>
</html>

这里写图片描述
2.6 css盒子模型
3 盒子模型
3.1 定义
可以把html页面上每个标签看做是一个盒子。
盒子相关的属性：

    宽度和高度（width和height）： 决定这个盒子的容量
    内边距（padding）： 盒子边框与内容的距离
    边框（border）： 盒子的厚度
    外边距（margin）： 盒子与盒子之间的距离

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
    width:200px;
    height:200px;
    border:solid 4px #0F0
    }
#d1{
    height:400px;
    width:400px;
    border: solid 4px #090;
    padding-top:20px;
    margin-top:20px}
</style>
</head>

<body>
<div>这是第一个盒子</div>
<div id="d1">这是第二个盒子</div>
</body>
</html>

这里写图片描述
2.7. CSS定位（画图解释）
相对定位：relative（相对自己之前的位置）
绝对定位：abosolute（相对父标签的位置）
固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
    height:100px;
    width:100px;
    border:dashed 5px #0F0}
#d1{
    /*position:relative;
    top:20px;
    left:20px*/
    /*position:absolute;
    top:20px;
    left:20px;*/
    position:fixed;
    top:250px;
    left:600px;

    }
</style>
</head>

<body>
<div>div1</div>
<div id="d1">div2</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />br /><br /<br /><br /><br /><br /><br />

</body>
</html>