前端学习之 CSS（一）

时间 2019-12-09

标签前端学习 css 栏目 CSS 繁體版

原文原文链接

一:什么是 CSS?

·CSS 指层叠样式表 (Cascading Style Sheets)php

·样式定义如何显示 HTML 元素css

·样式一般存储在样式表中html

·把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题前端

·外部样式表能够极大提升工做效率浏览器

·外部样式表一般存储在 CSS 文件中app

·多个样式定义可层叠为一个ide

二:CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:布局

选择器一般是您须要改变样式的 HTML 元素。字体

每条声明由一个属性和一个值组成。网站

属性（property）是您但愿设置的样式属性（style attribute）。每一个属性有一个值。属性和值被冒号分开。

三:CSS的引入方式

1. 行内式

这种当时不推荐使用

<div>

<p style = "color:blue;">这个段落采用了CSS行内式。</p>

</div>

效果以下(style使得字体变蓝):

2. 内接样式

例子:

首先是head里的内容：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color:blue;
        }
    </style>
</head>

View Code

而后是body里的内容:

div>
    <p>
        这是一个内接样式
    </p>
</div>

View Code

最后是效果图:

3.外接样式

(1)连接式

html内容为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="03.css">
</head>
<body>
<div>
    <p>这是一个外连接</p>
</div>
</body>
</html>

View Code

css内容为：

p{
    color:red;
}

View Code

如图:

运行效果以下图:

(2) 导入式

不经常使用，由于在加载网页的时候，没有彻底加载的时候会网页结构变形。

HTML例内容为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
        @import url("04.css");
    </style>
</head>
<body>
<div>
    <p>这是一个外连接2</p>
</div>
</body>
</html>

View Code

css内容为:

p{
    color:blue;
}

View Code

运行效果以下图:

四:选择器

具备特定属性的HTML元素样式

具备特定属性的HTML元素样式不只仅是class和id。

css优先级,指的是浏览器加载css样式的前后顺序.

1.基本选择器

(1)标签(元素)选择器

标签选择器能够选中全部的标签元素，好比div，ul，li ，p等等，无论标签藏的多深，都能选中，选中的是全部的，而不是某一个，因此说 "共性" 而不是 ”特性“。只要相同的标签效果都会产生

例:

首先是html上的内容是:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" href="05_biaoqian.css">
</head>

<body>
<p>p标签的效果</p>
body 标签的效果
<br>
<span>span标签的效果</span>
</body>
</html>

View Code

而后是css文件内容:

body{
    color:gray;
    font-size: 12px;
}
/*标签选择器 {}前面是标签的名字*/
p{
    color: red;
    font-size: 20px;
}
span{
    color: brown;
}

View Code

两个文件的截图:

运行出来的效果图:

(2)类选择器

"." 加选中class名称

所谓类：就是class . class与id很是类似任何的标签均可以加类，可是类是能够重复,属于归类的概念。同一个标签中能够携带多个类，用空格隔开。开发经常使用类选择标签。

例:

首先是html内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="05_lei.css">
</head>
<body>
<!-- 公共类    共有的属性 -->
     <div>
         <p class="lv big">段落1</p>
         <p class="lv line">段落2</p>
         <p class="line big">段落3</p>
     </div>
</body>
</html>

View Code

CSS的内容为：

.lv{
     color: green;
 }
 .big{
     font-size: 40px;
 }
 .line{
    text-decoration: underline;
/*表示在文本下加下划线*/
}

View Code

两个代码文件关系如箭头，第一个p标签有两种类为lv 和 big ，将达到两种类的效果，同理另外另个p标签也是如此。

运行后的结果如图：

总结：

不要去试图用一个类将咱们的页面写完。这个标签要携带多个类，共同设置样式

每一个类要尽量的小，有公共的概念，可以让更多的标签使。

(3)id选择器(#+id名称)

# 加选中id名称

同一个页面中id不能重复。

任何的标签均可以设置id

id命名规范要以字母能够有数字下划线 - 大小写严格区分 aa和AA是两个不同的属性值。

例：

html内容为：
<div id="box">
    <p id = "s1">id选择器1</p>
    <p id="s2">id选择器2</p>
</div>


css内容为：
#box{
    background:green;
}
#s1{
    color: red;
}
#s2{
    font-size: 30px;
}

View Code

效果截图为：

CSS优先级，指的是浏览器加载CSS样式的前后顺序。

权值越大，优先级越高，如下是三个选择器的权值比较。

2.高级选择器

(1)后代选择器

例：

首选是html里面的内容为：

<div class="father">
    father 层
    <p class="box1">
        father 的子层
        <span class="sun">
            father 的孙子级层
        </span>
    </p>
</div>
<span class="noson">不属于father层里</span>

View Code

而后是css内容为：

.father .sun{
    color: darkorange;
}
.father .box1{
    color: blue;
}
.father{
    background: #666666;
}

View Code

而后是对效果进行截图：

首选是css中后代选择器.father .sun和.father .box1 对后代进行修饰，而后class =”noson”不是father的子类，全部不影响。

(2)子代选择器

使用>表示子代选择器。好比container>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

例：

前端html代码为：

<dic class="container">
    最外层
    <p class="son">
        这是儿子层
        <p class="sonson">
    这是孙子层
</p>
    </p>
</dic>

View Code

前端css代码为：

.container>p{
    color: yellowgreen;
}

View Code

效果图：

从效果分析得，container>p,而后孙子层会继承儿子层的效果。

(3) 并集选择器

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可使用并集选择器。

例：

首先是html内容为：

<h3>这是标题3的内容</h3>
<a href="https://www.cnblogs.com/hszstudypy">跳转到个人博客</a>

View Code

而后是css内容为：

h3,a{
    color: #008000;
    text-decoration: none;
}

View Code

效果为：

从效果分析,经过逗号隔开的都会产生这个css内容的效果。

好比像百度首页使用并集选择器。

这样的写法一般出如今高访问量的网站上：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; }

(4) 交集选择器

两个标签有相同的属性，而后css对这个属性进行修饰的效果将表如今这两个标签上，这也就是这个两个之间的交集

例：

首先是html代码：

<!--html代码-->
<div>
    <h4>高级选择器</h4>
    <p class="active">这是一个p</p>
    <h4 class="active">交集选择器</h4>
</div>

View Code

而后是css代码：

h4 {
    width: 100px;
    font-size: 14px;
    background: #00BFFF;
}
.active {
    color: red;
    text-decoration: underline;
}

View Code

效果图：

在上面的代码可知，第二个h4 class=”active”和p之间的交集就是active，全部都有交集的效果，而第一个h4是没有和p有交集的，全部没有红色字体的效果。

3.属性选择器

属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

(1)属性名称匹配

下面的例子是把包含标题（title）的全部元素变为蓝色：

例：

html上代码：

<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="mycnblogs" href="https://www.cnblogs.com/hszstudypy/">个人博客园</a>

View Code

css上代码:

[title]
{
color:blue;
}

View Code

效果图：

(2)完整匹配（属性和值选择器）

下面的实例改变了标题title='mycnblogs'元素的边框样式:

在(1)的css内容上加了：

[title=mycnblogs]
{
    border:5px solid green;
}

View Code

效果图为：

(3) 开头结尾匹配和包含匹配

开头匹配为：属性^=值

结尾匹配为：属性$=值

包含匹配为：属性*=值

首先是html的值：

<div class="mdiv">
    我是div的内容
    <p class="myp">

        我是div里的p内容
    </p>
    <p class="mype2">
        我是div里的第二p内容
    </p>

</div>
<p class="otherp">
    我是另一个的内容
</p>

View Code

而后是css的值为：

[class^=my]{
    color: #00BFFF;

}
[class$=p]{
    text-decoration: underline;
}

[class*=e]{
    background: yellow;
}

View Code

效果图:

效果及代码分析：首先是class以my开头的字体淡蓝色，而后是p结尾的加下划线，最后是包含e的背景为黄色。

(4)表单样式

属性选择器样式无需使用class或id的形式:

例：

首先是html代码：

<form name="input" action="demo-form.php" method="get">
name:<input type="text" name="fname" value="" size="20">
pwd:<input type="text" name="lname" value="" size="20">
<input type="button" value="Example Button">
</form>

View Code

而后是css代码：

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

View Code

结果为：

Input里面相应的type修饰相应的值。

4.伪类选择器

伪类选择器通常会用在超连接a标签中，使用a标签的伪类选择器，咱们必定要遵循"爱恨准则" LoVe HAte。

"爱恨准则"

:link

:visited

:hover(***)鼠标悬浮时,触发

:active

例：

前端html代码为：

<div class="box">
    <ul>
        <li class="item1"><a href="#">没有被访问</a></li>
        <li class="item2"><a href="">访问事后</a></li>
        <li class="item3"><a href="">鼠标悬停</a></li>
        <li class="item4"><a href="">鼠标摁住</a></li>
    </ul>
</div>

View Code

前端css样式代码为：

*没有被访问的a标签的样式*/
.box ul li.item1 a:link{
    color: #666;
}
/*访问事后的a标签的样式*/
.box ul li.item2 a:visited{
    color: red;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
    color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
    color: yellowgreen;
}

View Code

效果须要本身运行才能够清楚看到

5.伪元素选择器

例：

html代码:

<p>这是一个p标签</p>

css代码：

/*设置第一个首字母的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;
        }

/* 在....以前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器必定要结合content属性*/
        p:before{
            content:'hello';
        }

/*在....以后 添加内容，使用很是频繁 一般与我们后面要讲到布局 有很大的关联（清除浮动）*/
        p:after{
            content:'after';
            color: red;
            font-size: 40px;
        }

View Code

前端学习 之 CSS（一）

一:什么是 CSS?

二:CSS语法

三:CSS的引入方式

1. 行内式

2. 内接样式

3.外接样式

(1)连接式

(2) 导入式

四:选择器

1.基本选择器

(1)标签(元素)选择器

(2)类选择器

(3)id选择器(#+id名称)

2.高级选择器

(1)后代选择器

(2)子代选择器

(3) 并集选择器

(4) 交集选择器

3.属性选择器

(1)属性名称匹配

(2)完整匹配（属性和值选择器）

(3) 开头结尾匹配和包含匹配

(4)表单样式

4.伪类选择器

5.伪元素选择器

前端学习之 CSS（一）