前端入门 CCS

CSS
层叠样式表就是用来调节标签的样式

CSS注释

/*注释*/
/*
注释1
注释2
注释3
*/
注释的使用
        css应该是一个独立的文件
        /*这是小米首页的css样式文件*/
        /*顶部导航条样式*/
        /*侧边菜单栏样式*/

css语法结构

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

css三种映入方式

　　1.外部css文件(最正规的书写方式)

　　2.head内style标签内部直接书写css代码(也可以)

　　3.标签内部通过style属性直接书写对应的样式(不推荐)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="ccs练习.css">  变为草绿色-->
<!--    <style>-->
<!--        p{color: red;}   变为红色-->
<!--    </style>-->
</head>
<body>
    <p style="color: orange">今天天气不错</p>
</body>
</html>

/*这是css练习文件*/
/*公共样式*/
p{
    color:greenyellow;
}

如何查找标签

　　基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器 元素选择器*/
        /*div {  !*将页面上所有的div标签内部的文本变成红色*!*/
        /*    color: red;*/
        /*}*/

        /*类选择器     点号*/
        /*.c1 {  !*让所有具有c1类属性值的标签内部文本变成蓝色*!*/
        /*    color:blue;*/
        /*}*/

        /*id选择器     #号*/
        /*#d1 {  !*将id为d1的标签内部文本内容改成绿色*!*/
        /*    color: green;*/
        /*}*/

        /*!*通用选择器   *号*!*/
        /** {  !*页面上所有的标签统一修改样式*!*/
        /*    color: aqua;*/
        /*}*/
    </style>
</head>
<body>
<div class="c1">你好  有什么需要帮忙的嘛
    <span>我是div内部的span</span>
</div>
<p id="d1" class="c1">来宾三位 楼上请</p>
<div>你好， 我能为你做什么</div>
<span class="c1">小红过来接待下</span>
<p>来宾三位  楼上请</p>
<span id="d2">小黄去接待下</span>
</body>
</html>

View Code

　　组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 后代选择器 */
        /*div span {  !*空格表示div内部的span没有层级限制*!*/
        /*    color: red;*/
        /*}*/

        /* 儿子选择器 */
        /*div > span {  !*>表示div内部的儿子*!*/
        /*    color: green;*/
        /*}*/

        /* 毗邻选择器 */
        /*div + span {  !*紧挨着的下一个标签*!*/
        /*    color: red;*/
        /*}*/

        /* 弟弟选择器 */
        /*div ~ span {  !*同级别下面所有的标签,只算同级别的*!*/
        /*    color: deeppink;*/
        /*}*/
    </style>
</head>
<body>



<span>div上面的span</span>
<span>div上面的span</span>
<div>
    <span>div内部第一个span</span>
    <p>div内部的p
        <span>div内部的p内部的span</span>
    </p>
    <span>div内部最后一个span</span>
</div>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<div>弟弟救我
    <p>我来舔你了</p>
</div>
<span>你会被我火火骚死</span>
</body>
</html>

View Code

　　属性选择器

　　　　所有的标签都可以有默认的属性

　　　　　　class

　　　　标签还可以有自定义的属性并且可以有多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器 [] */
        /*[username] {  !*找到页面上所有具有username属性名的标签*!*/
        /*    background-color: deeppink;*/
        /*}*/

        /*[username='jason'] {  !*找到页面上属性名是username并且属性值叫jason的标签*!*/
        /*    background-color: black;*/
        /*}*/

        input[username="jason"] {  /*找到页面上属性名是username并且属性值叫jason的input标签,input后不能有空格*/
            background-color: aqua;
        }

    </style>
</head>
<body>
<input type="text" username="jason">
<input type="text" username="sean">
<input type="text" username="owen">
<p username="tank">数据库的刷卡机大卡司</p>
<div username="oscar">奥斯卡件打开拉随机端口两三点</div>
<span username="jason">奥斯卡件打开拉随机端口两三点</span>
</body>
</html>

View Code

　　分组与嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
        /*    color: red;*/
        /*}*/
        /*p {*/
        /*    color: red;*/
        /*}*/
        /*span {*/
        /*    color: red;*/
        /*}*/

        /*div ,p, span {*/
        /*    color: green;*/
        /*}*/
        /*.c1,#d1,p {*/
        /*    color: red;*/
        /*}*/
        /*.c1 h1{ !*找具有c1属性值的标签 后代的h1*!*/
        /*    color: green;*/
        /*}*/
    </style>
</head>
<body>
<div class="c1">快要下课了 我好饿 好饿 好饿 我真的好饿
    <h1>我是h标签</h1>

</div>
<span id="d1">快要下课了 我好饿 好饿 好饿 我真的好饿</span>
<p>快要下课了 我好饿 好饿 好饿 我真的好饿</p>
</body>
</html>

View Code

　　伪类选择器

　　　　a链接标签

　　　　　　a标签默认的颜色是蓝色但是只要你点过一次就会变成紫色　浏览器会记住你有没有点过

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {    /*网址未被点击时*/
            color: aqua;

        }

        a:hover {  /*鼠标悬浮*/
            color: black;
        }
        a:active {  /*点击时*/
            color: green;
        }
        a:visited { /*已访问过的*/
            color: gray;
        }
        input:focus {   /*选中输入框时*/
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.mzitu.com">点我1</a>
<a href="https://www.luffycity.com">点我2</a>
<a href="https://www.sogo.com">点我2</a>
<a href="https://www.sajdkasd.com">点我2</a>

<input type="text">
</body>
</html>

View Code

　　伪元素选择器　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p:first-letter{color: red;font-size: 48px;}     !*第一个今字*!*/
        p:before{content: '哦哟';color: green}    /*开头添加哦哟，不可选中*/
        p:after{content: '?';color: blue;}      /*结尾增加？，不可选中*/
    </style>
</head>
<body>
<p>今天天气不错</p>
</body>
</html>

View Code

　　如何调节样式

猜你喜欢