【无标题】css教程

晨风流云837

已于 2023-08-02 10:26:47 修改

阅读量123

点赞数 1

文章标签： css 前端

于 2023-07-16 17:05:27 首次发布

本文链接：https://blog.csdn.net/weixin_70856517/article/details/131750874

版权

css教程

一、css介绍
二、css基础
三、css用法
- 1.选择器
- 在这里插入图片描述
并集选择器
- 在这里插入图片描述

一、css介绍

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

二、css基础

1.语法

css 由两部分组成：选择器和一条或多条声明。
声明是以键值对形式存在的也可以称为属性：值。
在这里插入图片描述

代码如下（示例）：

h2 {
    color: aqua;
}
body {
	color:red;
}

2.css注释

CSS注释以 /* 开始, 以 */ 结束
代码如下（示例）：

/*这是一个注释*/
p {
	text-align:center;
}

3.css连接模式

css连接方式有三种

内联样式
内部样式表
外部样式表

1.内联样式

<h1 style="font-weight: 700;color: aqua;">css学习</h1>

在这里插入图片描述
2.内部样式表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color:blue
        }
    </style>
  
</head>
<body>
    <h1 >css学习</h1>
 </body>

</html>

在这里插入图片描述
3.外部样式表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="./css/ht1.css">
  
</head>
<body>
    <h1 >css学习</h1>
 </body>

</html>

ht1.css

h1 {
    color: red;
}

在这里插入图片描述
优先级：!important>内联样式>内部样式表>外部样式表

三、css用法

1.选择器

1.标签选择器（根据名称、id、类来选取元素）
id选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Document</title>
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

类选择器
class

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Document</title>
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

2.组合选择器
后代选择器
后代选择器匹配属于指定元素后代的所有元素。
选择

元素内的所有

元素：

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: blue;
}
</style>
</head>
<body>
<h1>后代选择器</h1>
<p>后代选择器匹配作为指定元素后代的所有元素。</p>
<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section>
</div>
<p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p>
</body>
</html>

在这里插入图片描述

子选择器
子选择器匹配属于指定元素子元素的所有元素。

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: yellow;
}
</style>
</head>
<body>
<h1>子选择器</h1>
<p>子选择器 (>) 选择属于指定元素子元素的所有元素。</p>
<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
  <p>div 中的段落 4。</p>
</div>
<p>段落 5。不在 div 中。</p>
<p>段落 6。不在 div 中。</p>
</body>
</html>

并集选择器

div,p，a{
color:bule
}
并集选择器用，隔开

3.伪类选择器

a:link 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Document</title>
<style>
a:link {
	color:#000000;
	}      /* 未访问链接*/
a:visited {
	color:#00FF00;
	}  /* 已访问链接 */
a:hover {
	color:#FF00FF;
}  /* 鼠标移动到链接上 */
a:active {
	color:#0000FF;
}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="https://www.baidu.com" target="_blank">这是一个链接</a></b></p>

</body>
</html>

:first-child 第一个子元素
:last-child 最后一个子元素
nth-child(2n) 选中第n个元素
:first-of-type 父元素的第一个元素：
:last-of-type父元素的最后一个 p 元素：
:nth-of-type()父元素的指定元素：

在这里插入图片描述
：focus 获取焦点的表单元素
只有鼠标点击时发生变换鼠标移开就不会有了

input:focus {
	background-color:red;
}

在这里插入图片描述

4.属性选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./css/ht1.css"> -->
    <style>
        [title="by"] {
            color: rgb(147, 18, 233);
            font-weight: 700;
            font-size: larger;
        }

    </style>
</head>

<body>
    <p title="by">晨风流云</p>
</body>

</html>

通配符选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./css/ht1.css"> -->
    <style>
        * {
            text-align: center;
        }
        [title="by"] {
            color: rgb(147, 18, 233);
            font-weight: 700;
            font-size: larger;
        }
        h1 {
    color: red;
}
h2 {
    color: aqua;
}

.year {
    color: blue;
}

#name {
    color: aqua;
}
    </style>
</head>

<body>
    <h1 >css学习</h1>
    <p title="by">晨风流云</p>

    <p class="year">zhifaihhfai</p>
    <h1 id="name">前端</h1>
    <p></p>
    <a href="https://www.baidu.com">百度</a>
    <div title="a">
        afaf
    </div>
</body>

</html>

在这里插入图片描述

晨风流云837

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【无标题】css教程

CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个。
复制链接

扫一扫