CSS

一、CSS的基本操作

1.CSS的引入

CSS的引入有三种方法，最常用的就是将CSS写在不同的文件里面，即第三种方式

①直接在标签里面添加样式

<p style="color:red">在网络和现实中，我都是孤独的！！！</p>

②在head里面添加样式

注意：这种添加方法，ID以#开头，class以.开头，如果为标签添加样式，只需要在style中直接添加

<html>
<head>
    <style>
        p{
            color:red;
        }
        .test{
            color:green;
        }
        #test{
            color:bule;
        }
    </style>
</head>
<body>
<p>为标签添加样式</p>
<div class="test">CLASS添加样式</div>
<h1 id="test">ID添加样式</h1>
</body>
</html>

CSS的第二种引入方式

③以文件的方式引入

将CSS文件写在同一目录的新建文件夹下，然后使用相对路径引入CSS文档

最常用的就是在head标签下使用link标签导入

<link href="css/1.css" type="text/css" rel="stylesheet">

以上代码中，有必要解释一下link的属性：href是css的相对路径；type指定样式表；rel指定当前文档与被链接文档之间的关系，stylesheet得到了所有浏览器的支持。

很多人记不住link的属性名，这里有个偷懒的方式，就是输入link然后TAB补全即可，只适合于pycharm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的第三种引入方式</title>
    <link href="css/1.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p>在网络和现实中，我都是孤独的！！！</p>
    <p class="test1">在网络和现实中，我都是孤独的！！！</p>
    <p id="test2">在网络和现实中，我都是孤独的！！！</p>
</body>
</html>

CSS的第三种引入方式--HTML

p{
    color: aqua;
}
.test1{
    color: #9595fb;
}
#test2{
    color: seagreen;
}

CSS的第三种引入方式--CSS

如果给同一个标签添加多个css样式，则遵循就近原则，就是说，哪个样式离该标签近，则选择该样式

2.CSS选择器

①基本选择器

标签选择器-----在head里面添加style，然后标签名{}

class选择器-----在head里面添加style，然后.标签名{}

id选择器-----在head里面添加style，然后#标签名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css基本选择器</title>
    <style>
        p{
            color: red;
        }
        .test1{
            color: blue;
        }
        #test2{
            color: forestgreen;
        }
    </style>
</head>
<body>
<p>苏老堤边玉一林</p>
<p >六桥风月是知音</p>
<p class="test1">任他桃李争欢赏</p>
<p id="test2">不为繁华易素心</p>
</body>
</html>

CSS基本选择器

②复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css复合选择器</title>
    <style>
        .father{
            color: blue;/*选定所有的后代*/
        }
        .father>p{
            color: aqua;
        }
        .brother~p{
            font-size: 25px;
        }
    </style>
</head>
<body>
<p></p>
<div class="father">
    <p>苏老堤边玉一林</p>
    <p class="brother">六桥风月是<span>知音</span></p>
    <p>--------------------------------</p>
    <div>任他桃李挣欢赏
        <p class="son">不为繁华易素心</p>
    </div>
</div>
</body>
</html>

CSS复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css复合选择器</title>
</head>
<body>
<p></p>
<div class="father">
    <p>苏老堤边玉一林</p>
    <p class="brother">六桥风月是<span>知音</span></p>
    <div>任他桃李挣欢赏
        <p class="son">不为繁华易素心</p>
    </div>
</div>
</body>
</htm

一下解释均采用上边的网页，先看看效果

现在逐步添加样式

①后代选择器

.father{
        color:blue;/*选定所有的后代*/
        }

.father>p{
           color: aqua;/*只选择子代，在father标签下的所有p标签*/
            }

②兄弟选择器

.brother~p{

　　　　　forestgreen;/*只选择后边的同一级的p标签*/ 
　　　　　　　　}

③相邻选择器

.brother+div{
            color: darkorange;/*选择后边紧挨的标签*/
        }

④所有选择器

*{
  font-size: 20px;
  }

⑤分组选择器

如果两个标签具有相同的样式，两标签之间用逗号相连即可

.test1,.test2{
            color:red;
            }

⑥权重问题

如果一个标签下同时具有class和id，则根据权重值来更改样式，和顺序无关

class的权重值为1；id的权重值为100

样式修改优先级：ID>CLASS>标签

⑦伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a:link{
            color: yellow;
        }
        a:visited{
            color: black;
        }
        a:hover{
            font-size: 30px;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">点击跳转百度</a>
</body>
</html>

伪类选择器

以上属性的参数解释：link原来的样式；visited点击之后的样式；however鼠标划过的样式，active鼠标点击还未松开的样式

3.CSS样式操作

①字体常用样式

font-family：字体

font-size：字体大小

font-style：字体样式

font-weight：字体粗细（bold是加粗）

.test{
    font-family: 华文隶书;
    font-size: 40px;
    font-style: normal;/*italic斜体的字体样式。*/
    font-weight: bold;
}

字体样式

②文本常用样式

text-align：对齐方式

text-indent：首行缩进

text-decoration：文本线

letter-spacing：字距

word-spacing：词距

line-height：行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式操作</title>
    <link rel="stylesheet" href="css/text.css">
</head>
<body>
<h3>人生苦短，我用python</h3>
<h4>一入python深似海，从此妹纸是路人</h4>
<p>Python 是一门有条理的和强大的面向对象的程序设计语言，类似于Perl, Ruby, Scheme, Java.</p>
<p>自从20世纪90年代初Python语言诞生至今，它已被逐渐广泛应用于系统管理任务的处理和Web编程。</p>
<p>Python的创始人为Guido van Rossum。1989年圣诞节期间，在阿姆斯特丹，Guido为了打发圣诞节的无趣，决心开发一个新的脚本解释程序，作为ABC 语言的一种继承。之所以选中Python（大蟒蛇的意思）作为该编程语言的名字，是因为他是一个叫Monty Python的喜剧团体的爱好者。</p>
<p>ABC是由Guido参加设计的一种教学语言。就Guido本人看来，ABC 这种语言非常优美和强大，是专门为非专业程序员设计的。但是ABC语言并没有成功，究其原因，Guido 认为是其非开放造成的。Guido 决心在Python 中避免这一错误。同时，他还想实现在ABC 中闪现过但未曾实现的东西。</p>
<p>就这样，Python在Guido手中诞生了。可以说，Python是从ABC发展起来，主要受到了Modula-3（另一种相当优美且强大的语言，为小型团体所设计的）的影响。并且结合了Unix shell和C的习惯。</p>
</body>
</html>

文本样式--HTML

body{
    background: #9595fb;
    color: white;
}
h4,p{
    text-align: left;
    text-indent: 40px;
    text-decoration: black;
    letter-spacing: 5px;
    line-height: 20px;
}

文本样式--CSS

③背景常用样式

background-color：背景色

background-image：背景图片

background-repeat：背景铺盖（no-repeat表示背景只显示一次）

background-size：背景尺寸

background-position：背景定位

background：复合样式

一般情况下使用复合样式，可以将所有样式添加进去

body
{ 
background: green url(/i/eg_bg_03.gif) no-repeat fixed center; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <link rel="stylesheet" href="css/backgoud.css">
</head>
<body>
<div></div>
</body>
</html>

背景样式--HTML

body{
    background-color: burlywood;
    background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538584859192&di=fba52772c6c62e92a92828145b89cfb8&imgtype=0&src=http%3A%2F%2F09.imgmini.eastday.com%2Fmobile%2F20180817%2F20180817005647_75da6101e053f891ad7b3eadae5f288a_1_mwpm_03201609.jpg");
    background-repeat: no-repeat;
    background-position: 200px 200px;
}

背景样式--CSS

作者：ChanceySolo

出处：https://www.cnblogs.com/chancey/p/9741025.html

版权：本作品采用「ChanceySolo-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。