python全栈开发_day45_css选择器

转载 于 2019-05-29 21:15:00 发布 · 102 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/xuxingping/p/10946285.html
文章标签：

#python #前端 #人工智能 #ViewUI

本文聚焦前端CSS，介绍了CSS注释、语法结构和三种引入方式，强调样式应写在单独文件。还阐述学习CSS流程，包括查找标签的各类选择器及优先级，以及给标签设置样式的方法，如修改文本、背景、边框等属性。

前端之CSS
层叠样式表(口红，美甲，眉笔，化妆盒)

注释
/*单行注释*/
/*
多行注释
*/
语法结构
选择器 {属性:属性值;属性:属性值;属性:属性值;}

三种引入css样式的方式
head内style标签内部直接书写css代码
link标签引入外部css文件
直接在标签内通过style属性书写css样式

ps:注意页面css样式通常都应该写在单独的css文件中


学习css的流程

导入css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style>-->
        <!--p {color: red}-->
    <!--</style>-->
    <!--<link rel="stylesheet" href="mycss.css">-->
</head>
<body>
<p style="color: deeppink">我是一个p标签</p>
</body>
</html>
View Code

 

 

1.先学如何查找标签


基本选择器

　　标签选择器
　　id选择器
　　类选择器
　　通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器 所有span标签的颜色都是红色*/
        /*span {*/
            /*color: red;*/
        /*}*/
        /*id选择器*/
        /*#s1 {*/
            /*font-size: 24px;*/
        /*}*/
        /*类选择器*/
        /*.c1 {*/
            /*color: orange;*/
        /*}*/
        /*通用选择器*/
        /** {*/
           /*color: blue;*/
        /*}*/
    </style>
</head>
<body>
<span id="s1">span</span>
<div class="c1">div
    <p>p
        <span>span</span>
    </p>
</div>
<div class="c1">div</div>
</body>
</html>
View Code


组合选择器

　　后代选择器
　　儿子选择器
　　毗邻选择器
　　弟弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器  div里面所有的span标签都变成蓝色 子子孙孙*/
        /*div span{*/
            /*color: blue;*/
        /*}*/
        /*儿子选择器*/
        /*div>span {*/
            /*color: red;*/
        /*}*/
        /*毗邻选择器 对下不对上*/
        /*div+span {*/
            /*color: blue;*/
        /*}*/
        /*弟弟选择器 对下不对上*/
        div~span {
            color: deeppink;
        }
    </style>
</head>
<body>
<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>
</body>
</html>
View Code

 

 


属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*只要有xxx属性名的标签都找到*/
        /*[xxx] {*/
            /*color: red;*/
        /*}*/
        /*只要标签有属性名为xxx并且值为1*/
        /*[xxx='1'] {*/
            /*color: blue;*/
        /*}*/
        /*规定p标签内部必须有属性名为xxx并且值为2的标签*/
        p[xxx='2'] {
          color: green;
        }
    </style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>我只有属性名</p>
<p xxx="1">我有属性名和属性值并且值为1</p>
<p xxx="2">我有属性名和属性值并且值为2</p>
</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: blue;
        }
        /*嵌套:不同的选择器可以共用一个样式
        后代选择器与标签组合使用
        */
        div p,span {
            color: red;
        }
    </style>
</head>
<body>
<div>div</div>
<p>p</p>
<span>span</span>

</body>
</html>
View Code

 

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {
            color: red;
        }
        a:hover {
            color: yellow;
        }
        a:active {
            color: black;
        }
        a:visited {
            color: green;
        }
        input:focus {
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">笑话网</a>
<a href="http://www.sogo.com">笑话网</a>
<input type="text">
</body>
</html>
View Code

 

研究选择器优先级
相同选择器 不同的引入方式 就进原则 谁越靠近标签谁输了算
不同选择器 相同的引入方式

行内样式 > id选择器> 类选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            color: green;
        }
        /*.c1 {*/
            /*color: aqua;*/
        /*}*/
        /*p {*/
            /*color: red;*/
        /*}*/
    </style>
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="c1" style="color: blue">p</p>
</body>
</html>
View Code

 

 

2.如何给查找到的标签设置样式

 

样式修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
            /*width: 400px;*/
            /*height: 100px;*/
        /*}*/
        /*p {*/
            /*font-family: "Sitka Banner", "Arial", sans-serif*/
        /*}*/
        /*p {*/
            /*font-size: 16px;*/
            /*font-weight: lighter;*/
        /*}*/
    </style>
</head>
<body>
<div>div</div>
<div>div</div>
<p>以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可</p>
</body>
</html>
View Code

 

文本颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*color: red;*/
            /*color: rgb(0,0,255);*/
            /*color: #FF6700;*/
            color: rgba(0,0,255,0.8);
        }
    </style>
</head>
<body>
<p>以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可</p>
</body>
</html>
View Code

 

文本属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*text-align: right;*/
            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            text-decoration: line-through;
            text-indent: 48px;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<p>以把多个字体名称作为</p>
<a href="http://www.xiaohuar.com">笑话网</a>
</body>
</html>
View Code

 

背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /*background-color: green;*/
            /*background-image: url("1.png");*/
            /*background-repeat: no-repeat;*/
            /*background-position: center;*/
            background: no-repeat center url("1.png") blue ;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
View Code

 

背景图片实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /*background-color: green;*/
            /*background-image: url("1.png");*/
            /*background-repeat: no-repeat;*/
            /*background-position: center;*/
            background: no-repeat center url("1.png") blue ;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
View Code

 

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            /*border-width: 3px;*/
            /*border-style: dashed;*/
            /*border-color: deeppink;*/
            border: 3px solid red;
        }
    </style>
</head>
<body>
<div>div</div>
</body>
</html>
View Code

 

画圈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: red;
            border: 3px solid black;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>
View Code

 

display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
            /*display: none;*/
        /*}*/
        /*inline将块儿级标签变成行内标签*/
        /*div {*/
            /*display: inline;*/
        /*}*/
        /*span   {*/
            /*display: block;*/
        /*}*/
        /*将选择的标签既具有行内标签特点又有块儿级标签的特点*/
        span {
            display: inline-block;
            height: 400px;
            width: 400px;
            background-color: red;
            border: 3px solid black;
        }

    </style>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>
View Code

 



标签通常都必须有的属性
id 用来唯一标识标签
class 标签类属性(******),可以有多个值
ps:你可以把它理解成python面向对象的继承

你可以给任意的标签加任意的属性名和属性值

转载于:https://www.cnblogs.com/xuxingping/p/10946285.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值