CSS笔记

qq_53587164

已于 2022-02-28 18:46:45 修改

阅读量345

点赞数

文章标签： html css 前端

于 2022-02-28 18:43:40 首次发布

本文链接：https://blog.csdn.net/qq_53587164/article/details/123188929

版权

本文详细介绍了CSS中的选择器和样式，包括ID选择器、类选择器、伪类选择器、字体样式、文本颜色、文本对齐、链接伪类、字体大小、文本修饰、文本转换和文本缩进等，以及如何创建和美化导航栏，如垂直导航栏、水平导航栏和固定导航条。内容涵盖HTML元素的样式设置和交互效果，有助于提升网页设计能力。

摘要由CSDN通过智能技术生成

Css选择器

1.后代选择器

后代选择器用于选取某元素的后代元素

<!DOCTYPE html>

<html>

<head>

<style>

div p

{

background-color:yellow;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

效果如下：

正在上传…重新上传取消

2.子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

以下实例选择了<div>元素中所有直接子元素 <p> ：

案例：

<!DOCTYPE html>

<html>

<head>

<style>

div>p

{

background-color:yellow;

}

</style>

</head>

<body>

<h1>Welcome to My Homepage</h1>

<div>

<h2>My name is Donald</h2>

<p>I live in Duckburg.</p>

</div>

<div>

<span><p>I will not be styled.</p></span>

</div>

<p>My best friend is Mickey.</p>

</body>

</html>

正在上传…重新上传取消

效果如下：

first-child 当前所有元素的子元素是否有p的第一个 */

last-child 当前所有元素的子元素是否有p的最后一个 */

/* nth-child(n) 当前所有元素的子元素的第n个*/

/* after在....之后

before在....之前*/

p::before {

content: "姓名：";

}

.uls li {

background-color: #eee;

color: #fff;

display: inline-block;

}

.uls li:hover {

background-color: greenyellow;

}

.uls li:first-child {

background-color: #FFC0CB;

}

[title]{

color: red;

font-size: 50px;

}

color: red;

font-size: 50px;

}

3.相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

<!DOCTYPE html>

<html>

<head>

<style>

div+p

{

background-color:yellow;

}

</style>

</head>

<body>

<div>

</div>

<p>DIV 之后的第一个 P 元素。</p>

<p>DIV 之后的第二个 P 元素。</p>

</body></html>

效果如下：

正在上传…重新上传取消

4.后续兄弟选择器（普通兄弟选择器）

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

<!DOCTYPE html>

<html>

<head>

<style>

div~p

{

background-color:yellow;

}

</style>

</head>

<body>

<p>之前段落，不会添加背景颜色。</p>

<div>

</div>

</body>

</html>

效果如下：

正在上传…重新上传取消

类选择器：

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用

为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 HTML 代码：

This heading is very important.

</h1>

This paragraph is very important.

</p>

语法

然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：

*.important {color:red;}

如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：

.important {color:red;}

ID 选择器

在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。

语法

首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

请看下面的规则：

*#intro {font-weight:bold;}

与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：

#intro {font-weight:bold;}

这个选择器的效果将是一样的。

第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。

以下是一个实际 ID 选择器的例子：

<p id="intro">This is a paragraph of introduction.</p>

<!DOCTYPE html>

<html>

margin:0;

padding:0;

}

</style>

</head>

<body>

<p>hello world</p>

</body>

</html>

<!DOCTYPE html>

<html>

margin:0;

padding:0;

}

</style>

</head>

<body>

<p>hello world</p>

</body>

</html>

链接伪类选择器

文章标签：伪类选择器：link ：visited ：hover ：active

版权

用：表示

：link 位访问的链接

：visited 已经访问过的链接会发生改变

：hover 鼠标移动到链接上会发生改变

：active 选定的链接

顺序不能变

<!DOCTYPE html>

<head>

<title>链接伪类选择器</title>

<style>

a:link { /* 未访问过得链接状态*/

color: green;text-decoration: none;

font-size: 24px;

font-weight: bold;

}

a:visited {

/*链接已经点过的样子*/

color: yellow;

}

a:hover { /*鼠标经过链接是的样子*/

color: #f10215;

}

a:active {

/*鼠标按下时候的样子*/

color: skyblue;

}

</style>

</head>

<body>

</body>

</html>

用：表示

：link 位访问的链接

：visited 已经访问过的链接会发生改变

：hover 鼠标移动到链接上会发生改变

：active 选定的链接

顺序不能变

<!DOCTYPE html>

<head>

<title>链接伪类选择器</title>

<style>

a:link { /* 未访问过得链接状态*/

color: green;text-decoration: none;

font-size: 24px;

font-weight: bold;

}

a:visited {

/*链接已经点过的样子*/

color: yellow;

}

a:hover { /*鼠标经过链接是的样子*/

color: #f10215;

}

a:active {

/*鼠标按下时候的样子*/

color: skyblue;

}

</style>

</head>

<body>

<a href="http://www.baidu.com">百度一下</a>

</body>

</html>

字体样式

1.字体系列

font-family 属性设置文本的字体系列。

如Font Family："宋体"。

<style>

p.serif{font-family:"Times New Roman",Times,serif;}

p.sansserif{font-family:Arial,Helvetica,sans-serif;}

</style>

</head>

<body>

<h1>CSS font-family</h1>

<p class="serif">这一段的字体是 Times New Roman </p>

<p class="sansserif">这一段的字体是 Arial.</p>

</body>

字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

<style>

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

</style>

</head>

<body>

<p class="normal">这是一个段落,正常。</p>

<p class="italic">这是一个段落,斜体。</p>

<p class="oblique">这是一个段落,倾斜体。</p>

</body>