CSS基础入门
什么是CSS？
1.CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。
2.HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。
3.HTML、CSS和JavaScript的关系如下：“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”
样式引入方式
1.行内式引入
使用style属性在特定的HTML标记内插入CSS代码，语法“<标签名 style="css样式">...</标签名>”；
<!--html-->
<html>
<body>
<h1 style="color: maroon; margin-left: 40px">PHP中文网</h1>
<p style="color: blue;">https://www.php.cn/</p>
</body>
</html>2.嵌入式引入
在文档head部分的style标签对中放入CSS代码，语法“<style>样式</style>”；
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>https://www.php.cn/</p>
</body>
</html>3.外部引入
将CSS代码放入外部CSS文件中，使用link标签或“@import”规则引入html文档中。
1）、使用link
链接样式是指在外部定义CSS样式表并形成以.CSS为扩展名文件，然后在页面中通过
链接标记链接到页面中，而且该链接语句必须放在页面的<head>标记区。
语法：
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2）、使用@import
导入式是通过@import在<style>标签中进行声明的
<style type="text/css">
@import url("css文件路径");
</style>CSS选择器
1.标签名选择器
格式：
标签名{
属性：值；
}
标签名选择器可以决定哪些标签被动的使用这个样式
/*在所有div标签上修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线，
并且修改所有span标签的字体颜色为黄色，字体大小20个像素，边框为5像素蓝色虚线*/
<head>
<style>
div{
border:1px solid blue;
color:yellow;
font-size:30px;
}
span{
border:5px deshed blue;
color:yellow;
font-size:20px;
}
</style>
</head>
<body>
<div>内容1</div>
<span>内容2</span>
</body>2.id选择器
id选择器用来选取带有给定id属性的元素。语法:#id
例如:
html
<div id="container">...</div>
css
#container {
color: blue;
}3.class选择器
类选择器允许以一种独立于文档元素的方式来指定样式，该选择器可以单独使用，也可以与其他元素结合使用
html
<div class="related-author">内容</div>
CSS
.related-author {
font-size: 18px;
font-weight: bold;
}4.组合选择器
格式：
选择器1，...，选择器n{
属性：值；
}
5.常用样式
- color:red/blue...
- width:19px;
- height:20px;
- background-color:green;
- font-size:30px;
- border:1px solid red;
- DIV居中：
margin-left:auto;
mardin-right:auto;
- 文字居中：text-align：center
😀哈哈，学到这里在仅仅只是了解了什么是css与相关语法，如要深入学习请查阅相关书籍