前端CSS基础学习 day1

最新推荐文章于 2024-04-30 16:17:31 发布

shengqi_0323

最新推荐文章于 2024-04-30 16:17:31 发布

阅读量77

点赞数

文章标签：前端 css 学习

本文链接：https://blog.csdn.net/qq_31937327/article/details/131786908

版权

前端CSS基础学习 day1

注：以下资源来自菜鸟教程

1、通俗的理解

CSS指层叠样式表 (Cascading Style Sheets)，通俗理解就是给html定义样式的。

2、语法

CSS一般由两部分组成：

选择器
一条/多条声明属性:属性值

p {color:red;text-align:center;}

3、CSS选择器之id、class

以 “#” 来定义

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS之id选择器</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

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

class

以一个点 . 号显示
多个 class 选择器可以使用空格分开（见以下代码）

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

<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中，颜色为红色。</p> 
</body>
</html>

4、CSS创建形式

外部样式表

有专门的一个CSS文件。
每个页面使用 link 标签链接到样式表。 link 标签在文档头部

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

内部样式表

使用 style 标签在文档头部定义内部样式表

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式表

在相关的标签内(body内)使用样式（style）属性

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

继承性

# 外部样式
h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}
#内部样式
h3
{
    text-align:right;
    font-size:20pt;
}
# 假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;

优先级

# style.css代码
h3 {
    color:blue;
}
<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>显示绿色，是内部样式</h3>
</body>

# 注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式，实例如下：
<head>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <h3>显示蓝色，是外部样式</h3>
</body>