【Web前端系列课程（一）】HTML+CSS

老夏 · 发表于 2020-4-16 16:24:04

第七章 CSS基本语法
7.1 CSS基本语法

一、CSS语法格式
CSS根据其文件位置，有不同的语法格式，但是基本格式不变，就是"属性:属性值;"。

h1{
color:#f00;
}

复制代码

二、CSS注释
CSS使用/* */进行单行和多行文本注释。

三、CSS文件引入方式
（1）内联引用方式
将CSS直接写在HTML标签内部，即为内联引用方式。

<h1 style="color:#f00;">wecoding</h1>

复制代码

（2）内部引用方式
在head标签中，使用style标签包裹的CSS代码，即为内部引用方式。内部引用方式主要适用于并发数高的网站。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1{
color:#f00;
}
</style>
</head>

复制代码

（3）外部引用方式
将所有CSS代码写在一个后缀名为.css的文件中，并在head标签中添加link标签，以明确CSS文件的位置，这种方式就是外部引用。

<link rel="stylesheet" href="index.css">
h1{
color:#f00;
}

复制代码

老夏 · 发表于 2020-4-16 16:25:49

第八章 CSS选择器
8.1 元素选择器

元素选择器是最常见的CSS选择器，换句话说，文档的元素就是最基本的选择器。元素选择器通常将是某个HTML元素，比如p、h1、div、a，甚至可以是HTML本身。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1{
color:#f00;
}
</style>
</head>
<body>
<h1>wecoding</h1>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-16 16:29:52

第八章 CSS选择器
8.2 类选择器

在使用类选择器之前，需要在元素上添加class属性，然后在CSS代码中使用".类名"的方式进行样式修改。注意，类选择器的名字可以重复。
类选择器又可以分为普通类选择器，元素内的类选择器和元素内的多类选择器。
（1）普通类选择器

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c{
color:#f00;
}
</style>
</head>
<body>
<p class="c">html</p>
<p class="c">css</p>
<h1 class="c">python</h1>
<h2 class="c">php</h2>
</body>
</html>

复制代码

（2）元素内的类选择器

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p.c{
color:#f00;
}
</style>
</head>
<body>
<p class="c">html</p>
<p class="c">css</p>
<h1 class="c">python</h1>
<h2 class="c">php</h2>
</body>
</html>

复制代码

（3）元素内的多类选择器

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p.c.a{
color:#f00;
}
.a{
font-size:30px;
}
.b{
font-size:60px;
}
</style>
</head>
<body>
<p class="c a">html</p>
<p class="c b">css</p>
<h1 class="c">python</h1>
<h2 class="c">php</h2>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-16 16:33:02

第八章 CSS选择器
8.3 id选择器

id选择器与类选择器使用方法类似，但是id选择器需要在元素上添加id属性，并且在CSS代码中使用"#id名"的形式。注意，id选择器唯一，不可以重复。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#c{
color:#f00;
}
</style>
</head>
<body>
<p id="c">html</p>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-16 16:35:37

第八章 CSS选择器
8.4 分组选择器

将多个选择器放在一起，使其具有统一的样式，就是分组选择器，多个选择器之间使用逗号分隔。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p,.a,#b{
color:#f00;
}
</style>
</head>
<body>
<p>html</p>
<div class="a">css</div>
<span id="b">javascript</span>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-16 16:42:02

第八章 CSS选择器
8.5 派生选择器

通过依据元素在其位置的上下文关系来定义样式叫做派生选择器。
（1）后代选择器
选择某个元素的后代元素。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d p{
color:#f00;
}
</style>
</head>
<body>
<div id="d">
<p>html</p>
<p>css</p>
<div>
<p>javascript</p>
</div>
</div>
</body>
</html>

复制代码

（2）子代选择器
选择某个元素的子代元素。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d>p{
color:#f00;
}
</style>
</head>
<body>
<div id="d">
<p>html</p>
<p>css</p>
<div>
<p>javascript</p>
</div>
</div>
</body>
</html>

复制代码

（3）相邻兄弟选择器
选择紧接在另一个元素后的元素，而且二者有相同的父元素。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d+div{
color:#f00;
}
</style>
</head>
<body>
<div>php</div>
<div id="d">html</div>
<div>css</div>
<div>javascript</div>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-16 20:17:02

第八章 CSS选择器
8.6 伪类选择器

用于向某些选择器添加特殊的效果叫做伪类选择器。

属性	描述
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:focus	向拥有键盘输入焦点的元素添加样式
::selection	当文本被选择时给元素添加样式
:first-child	选择父元素中的第一个子元素，子元素可能是多个
:last-child	父元素的最后一个子元素，子元素可能是多个
:nth-child(n)	父元素的第n个子元素，子元素可能是多个

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:first-child{
color:#f00;
}
</style>
</head>
<body>
<p>1111111</p>
<div>
<p>222222</p>
<p>333333</p>
<div>
<p>444444</p>
<p>555555</p>
</div>
</div>
<p>6666666</p>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-16 20:27:32

第八章 CSS选择器
8.7 伪元素选择器

用于向某些选择器设置特殊效果叫做伪元素选择器。

属性	描述
:first-letter	向文本的第一个字母添加特殊样式
:first-line	向文本的首行添加特殊样式
:before	在元素之前添加内容，属性必须是content，如果要加图片，属性值可以用url（*.jpg）
:after	在元素之后添加内容，属性必须是content，如果要加图片，属性值可以用url（*.jpg）

老夏 · 发表于 2020-4-16 20:34:35

第八章 CSS选择器
8.8 属性选择器

根据元素的属性及属性值来选择元素叫做属性选择器。

属性	样式
*[id]	将所有包含id属性的元素进行样式应用
h1[id]	只对有id属性的h1元素进行样式应用
h1[id][name]	对同时具有id和name属性的元素进行样式应用
h1[id="web"]	只对id属性值为web的h1元素进行样式应用
h1[id^="web"]	只对id属性值以web为开头的h1元素进行样式应用
h1[id$="web"]	只对id属性值以web为结尾的h1元素进行样式应用
h1[id*="web"]	只对id属性值包含web的h1元素进行样式应用

老夏 · 发表于 2020-4-16 20:36:57

第八章 CSS选择器
8.9 CSS优先级

样式优先级由高至低分别是内联样式、id选择器、class选择器、标签选择器。但是我们可以通过使用"!important"来提高元素样式的优先级。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:#f00!important;
}
#p{
color:#00f;
}
</style>
</head>
<body>
<p id="p">1111111</p>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

【Web前端系列课程（一）】HTML+CSS

浏览过的版块

院长

资深讲师