编程技术

Document

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与相关语法，如要深入学习请查阅相关书籍