css基础笔记

最新推荐文章于 2024-10-10 16:54:25 发布

m0_74256887

最新推荐文章于 2024-10-10 16:54:25 发布

阅读量49

点赞数

分类专栏： HTML与CSS3网页设计文章标签： css html

本文链接：https://blog.csdn.net/m0_74256887/article/details/129415977

版权

HTML与CSS3网页设计专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括CSS的作用、语法结构、注释方式以及三种样式类型：行内样式、嵌入样式和外部样式。此外，还详细讲解了选择器的种类，如通配符选择器、标签选择器、ID选择器和Class选择器，以及它们在HTML元素样式控制中的应用。

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

第一章：
1、CSS简介
CSS：层叠样式表 (Cascading Style Sheets)，CSS定义如何显示 HTML 元素，解决了网页内容与表现
分离的问题。

2、CSS语法：
CSS 规则由两个主要的部分构成：选择器，以及一条或多条CSS规则的声明:
h1{color:bule;font-size:12px;}
选择器：用来确定CSS规则用于哪些HTML元素，h1是标签选择器，表示给网页中的H1标签加效
果。每条CSS规则的声明由一个属性和一个值组成，用冒号分隔；多条规则之间用分号隔开

3、CSS注释：
CSS代码注释符号：/* 注释内容 */

4、CSS分类：
根据CSS插入HTML中的位置不同，分成行内、嵌入、外部3种样式。

(1、) 行内样式
行内样式将CSS代码写到标签内。比如：
<h1 style="color: red;">hello</h1>
<h2 style="color: blue;font-size:38px ;">hello</h2>
在html中，通过style属性指定CSS规则。这种写法，不需要选择器。

(2、)嵌入样式
嵌入样式是将CSS代码写到头部head中，通过style标签包含。如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入样式</title>
<style type="text/css">
h1{ /*标签选择器：这种标签有效果*/
color: red;
}
p{
color: green; /*字体颜色*/
font-size: 32px; /*字体大小*/
}
</style>
</head>
<body>
<h1>hello1</h1>
<h2>hello2</h2>
<p>hello3</p>
</body>
</html>

(3)、外部样式
外部样式是将CSS代码写到独立的文件中（文件扩展名：.css）。网页需要引用外部CSS文件，CSS规
则才起作用。
比如：
CSS文件：my.css
/*外部css文件，直接写规则*/
h1{
color:red;
}
p{
color: #008000;
font-size: 48px;
}
HTML文件：test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外部样式</title>

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

</head>
<body>
<h1>hello1</h1>
<h2>hello2</h2>
<p>hello3</p>
</body>
</html>

5、常见的选择器有：
分类        选择器名称
基础类    通配符选择器、标签选择器、ID选择器、Class选择器
组合类       组选择器、后代选择器、子元素选择器、相邻兄弟元素选择器
属性   属性选择器
伪类        伪类选择器

6、选择器：
（1）*{}基础选择器
/*通配符选择器，代表所有元素*/
*{
margin: 0px; /*外边距*/
padding: 0px; /*内边距*/
}
由于通配符选择器会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用通配符选
择器，取而代之的是，把所有需要统一设置的元素，放在一起，一块设置。

（2）标签选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*标签选择器：以html标签名作为选择器名*/
body{
background-color: #CCC;
}
p{
color: #FFF;
}
</style>
</head>
<body>
<p>test3</p>
<p>test3</p>
<p>test3</p>
<p>test3</p>
</body>
</html>

（3）ID选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*ID选择器：名称以#开头*/
/*在同一个页面中，html元素的ID不能重复*/
/*ID选择器用于给特定某一个元素加CSS*/
#mytitle{
color: red;
font-size: 50px;
}
#mystyle{
text-decoration: underline;
font-size: 32px;
}
/*ID选择器前可以写标签名加以限制,表示只能这种标签使用*/
p#mystyle_2{
color: green;
}
</style>
</head>
<body>
<h1 id="mytitle">test1</h1>
<h1>test1aaaa</h1>
<h2>test2</h2>
<p id="mystyle">test3</p>
<p>test3</p>
<p id="mystyle_2">test3</p>
<p>test3</p>
</body>
</html>

（4、）class类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style type="text/css">
/*类选择器：名称以.开头，类选择器可以用于多个元素*/
.mycolor{
color: #FF0000;
}
/*类名前可以加限制*/
p.myfont{ /*只能用于p标签*/
font-size: 20px;
font-style: italic;
font-weight: bold;
text-decoration: underline;
}
#p1{
background-color: #008000;
}
</style>
</head>
<body>
<h1 class="mycolor">test1</h1>
<h2>test2</h2>

<p id="p1" class="mycolor myfont">test3</p>
<p>test3</p>
<p>test3</p>
<p class="mycolor myfont">test3</p>
</body>
</html>