首页 > Web开发 > 详细

前端之css

时间：2020-05-12 19:13:42      阅读：64      评论：0      收藏：0      [点我收藏+]

CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS语法

CSS实例

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

语法结构：

# css的语法结构
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

技术分享图片

 css注释

/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

注释的用处：

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

css引入的三种方式

1.style标签内部直接书写

<style>
    h1 {
      color: burlywood;
    }
</style>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        h1  {
            color: #0c7ede;
        }
    </style>
</head>
<body>
    <h1>老板好 要上课吗?</h1>
</body>
</html>

2.link标签引入外部css文件(最正规的方式 解耦合)

<link rel="stylesheet" href="mycss.css">   #mycss.css为外部css文件的名称

示例：

目录

技术分享图片

 

 test2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="mycss.css">


</head>
<body>
    <h1>老板好 要上课吗?</h1>
</body>
</html>

mycss.css

h1 {
    color: #ff1378;
}

3.行内式(一般不用)

<h1 style="color: green">老板好 要上课吗?</h1>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
    <h1 style="color: #2f0099">老板好 要上课吗?</h1>
</body>
</html>

css的学习流程

1.先学如何查找标签
    css查找标签的方式你一定要学会
        因为后面所有的框架封装的查找语句都是基于css来的
    
2.之后再学如何添加样式

css选择器

基本选择器

基本选择器种类：

# id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器

id选择器

语法：ps：#号不能少

#d1 {   !*找到id是d1的标签 将文本颜色变成红色*!*/
  background-color: red;    
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*id选择器*/
        #d1 {  /*找到id是d1的标签 将文本颜色变成绿黄色*/
            color: greenyellow;
        }
      
    </style>
</head>
<body>
    <div id="d1" class="c1 c2">div
        <p>div里面的p</p>
        <span>div里面的span</span>
    </div>
    <p id="d2" class="c1 c2">ppp</p>
    <span id="d3" class="c2">span111</span>
    <span id="d4" class="c3">span222</span>
</body>
</html>

执行效果：

技术分享图片

 

 类选择器

语法：

/*类选择器*/
.c1 {  /*找到class值里面包含c1的标签*/
    color: red;
}

div.c1 {  /*找到所有div并且class值里面包含c1的标签，将颜色改为红色*/
color: red;
}

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*类选择器*/
        p.c1 {  
            color: red;
        }
       
    </style>
</head>
<body>
    <div id="d1" class="c1 c2">div
        <p class="c2">div里面的p</p>
        <span>div里面的span</span>
    </div>
    <p id="d2" class="c2">ppp</p>
    <p id="dd" class="c1">ppp</p>
    <span id="d3" class="c2">span111</span>
    <span id="d4" class="c3">span222</span>
</body>
</html>

执行结果：div中的p不会生效

技术分享图片

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*类选择器*/
        .c1 {  /*找到class值里面包含c1的标签*/
            color: red;
        }
        
    </style>
</head>
<body>
    <div id="d1" class="c1 c2">div
        <p class="c2">div里面的p</p>
        <span>div里面的span</span>
    </div>
    <p id="d2" class="c2">ppp</p>
    <p id="dd" class="c1">ppp</p>
    <span id="d3" class="c2">span111</span>
    <span id="d4" class="c3">span222</span>
</body>
</html>

执行结果：

技术分享图片

 

元素(标签)选择器

语法：

span {  /*找到所有的span标签*/
            color: red;
        }

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*元素(标签)选择器*/
        span {  /*找到所有的span标签*/
            color: red;
        }
        
    </style>
</head>
<body>
    <div id="d1" class="c1 c2">div
        <p class="c2">div里面的p</p>
        <span>div里面的span</span>
    </div>
    <p id="d2" class="c2">ppp</p>
    <p id="dd" class="c1">ppp</p>
    <span id="d3" class="c2">span111</span>
    <span id="d4" class="c3">span222</span>
</body>
</html>

执行结果：

技术分享图片

 通用选择器

语法：

/*通用选择器*/
        * {  /*将html页面上所有的标签全部找到*/
            color: green;
        }

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*通用选择器*/
        * {  /*将html页面上所有的标签全部找到*/
            color: green;
        }

    </style>
</head>
<body>
    <div id="d1" class="c1 c2">div
        <p class="c2">div里面的p</p>
        <span>div里面的span</span>
    </div>
    <p id="d2" class="c2">ppp</p>
    <p id="dd" class="c1">ppp</p>
    <span id="d3" class="c2">span111</span>
    <span id="d4" class="c3">span222</span>
</body>
</html>

执行结果：

技术分享图片

 

 组合选择器

"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
    <div>div
        <p>div p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
  </div>
  div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲
  ...
"""

# 后代选择器

语法示例：

/*后代选择器*/
        div span {  /*将所有div标签的后代中的span标签设置，ps：不是div中的span不会变*/
            color: red;
        }

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*后代选择器*/
        div span {
            color: red;
        }

    </style>
</head>
<body>
    <span>span1</span>
    <span>span2</span>
    <div>div
        <p>div p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
    </div>
    <span>span</span>
    <span>span</span>
    <p>ppp</p>
    <span>span</span>
</body>
</html>

显示：

技术分享图片

 

 # 儿子选择器

语法示例：

/*儿子选择器*/
        div>span {
            color: red;
        }

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*儿子选择器*/
        div>span {
            color: red;
        }

       
    </style>
</head>
<body>
    <span>span1</span>
    <span>span2</span>
    <div>div
        <p>div p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
    </div>
    <span>span</span>
    <span>span</span>
    <p>ppp</p>
    <span>span</span>
</body>
</html>

显示：

技术分享图片

# 毗邻选择器

语法示例：

/*毗邻选择器*/
        div+span {  /*同级别紧挨着的下面的第一个*/
            color: aqua;
        }

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*毗邻选择器*/
        div+span {  /*同级别紧挨着的下面的第一个*/
            color: aqua;
        }

    </style>
</head>
<body>
    <span>span1</span>
    <span>span2</span>
    <div>div
        <p>div p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
    </div>
    <span>span1</span>
    <span>span2</span>
    <p>ppp</p>
    <span>span3</span>
</body>
</html>

显示：

技术分享图片

 

# 弟弟选择器

语法示例：

/*弟弟选择器*/
        div~span {  /*同级别下面所有的span*/
            color: red;
        }

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*弟弟选择器*/
        div~span {  /*同级别下面所有的span*/
            color: red;
        }
    </style>
</head>
<body>
    <span>span1</span>
    <span>span2</span>
    <div>div
        <p>div p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
    </div>
    <span>span1</span>
    <span>span2</span>
    <p>ppp</p>
    <span>span3</span>
</body>
</html>

显示：

技术分享图片

 属性选择器

"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的

语法示例：

[username] {  /*将所有含有属性名是username的标签背景色改为红色*/
            background-color: red;
        }

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        /*[username] {  !*将所有含有属性名是username的标签背景色改为红色*!*/
            /*background-color: red;*/
        /*}*/

        [username=‘jason‘] {  /*找到所有属性名是username并且属性值是jason的标签*/
            background-color: orange;
        }

        /*input[username=‘jason‘] {  !*找到所有属性名是username并且属性值是jason的input标签*!*/
        /*    background-color: wheat;*/
        /*}*/
    </style>
</head>
<body>
    <input type="text" username>
    <input type="text" username="jason">
    <input type="text" username="kevin">
    <p username="tank">水箱老师</p>
    <div username="egon">矮子老师</div>
    <span username="jason">jason老师 </span>
</body>
</html>

显示：

技术分享图片

 

前端之css

原文：https://www.cnblogs.com/baicai37/p/12877715.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！