CSS基础知识

Pureso

于 2021-03-30 00:57:06 发布

阅读量111

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/zhongshun0928/article/details/115315422

版权

JavaWeb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细讲解了CSS样式代码的编写，包括内联样式、外部链接和选择器的应用，如div、span、id和class的选择器，以及常用的样式属性。还介绍了如何使用不同的选择器精确控制元素样式，适合深入理解CSS布局和样式组织。

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

在< head>< /head>里写入css样式代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS</title>

  <!--style标签专门用来定义css样式代码-->
  <style type="text/css">
    div{
      border: 1px solid red;
    }
    span{
      border: 1px solid red;
    }
  </style>
</head>
<body>

<!--分别定义两个div，span标签，分别修改每个div标签的样式为：边框一个像素，实线，红色-->

<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p段落标签1</p>
<p>p段落标签2</p>a

</body>
</html>

专门写一个css文件调用

div{
  border: 1px solid yellow;
}
span{
  border: 1px solid red;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--link标签专门用来引入css样式代码-->
  <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>

<!--分别定义两个div，span标签，分别修改每个div标签的样式为：边框一个像素，实线，红色-->

<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p段落标签1</p>
<p>p段落标签2</p>a

</body>
</html>

标签名选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    div{
      border: 1px solid yellow;
      color: blue;
      font-size: 30px;
    }
    span{
      border: 5px dashed blue;
      color: yellow;
      font-size: 20px;
    }
  </style>
</head>

<!--
  在所有div标签上修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线
  并且修改所有span标签的字体颜色为黄色，字体大小20个像素，边框为5像素的蓝色虚线
-->

<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>

</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ID选择器</title>
  <style type="text/css">

    #id001{
      color: blue;
      font-size: 30px;
      border: 1px yellow solid;
    }

    #id002{
      color: red;
      font-size: 20px;
      border: 5px blue dotted;
    }

  </style>
</head>
<body>

<!--
  分别定义两个div标签
  第一个div标签定义id为id001，然后根据id属性定义css样式修改字体颜色为蓝色
  字体大小30个像素，边框为1像素黄色实线

  第二个div标签定义id为id002，然后根据id属性定义css样式修改字体颜色为红色
  字体大小20个像素，边框为5像素蓝色 点线
-->

<div id="id001">div标签1</div>
<div id="id002">div标签2</div>

</body>
</html>

class类型选择器和css一些常用样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>class类型选择器</title>
  <style type="text/css">
    .class01{
      color: blue;
      font-size: 30px;
      border: 1px yellow solid;
    }

    .class02{
      color: gray;
      font-size: 26px;
      border: 1px red solid;
    }

    /* 组合选择器 */
    .class003,#id001{
      color: blue;
      font-size: 20px;
      border: 1px yellow solid;
    }
    

    /*css常用样式*/
    .class04{
      color: red;
      border: 1px yellow solid;
      width: 300px;
      height: 300px;
      background-color: green;
      font-size: 30px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
    a{
      /*超链接去下划线*/
      text-decoration: none;
    }
    table{
      border: 1px red solid;
      border-collapse: collapse; /*将边框合并*/
    }
    td{
      border: 1px red solid;
    }
    ul{
      list-style: none;  /*列表去除修饰*/
    }

  </style>
</head>
<body>

<!--
  修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小30px，边框为1像素黄色实线
  修改class属性值为class02的div标签，字体颜色为灰色，字体大小26px，边框为1像素红色实线
-->

<div class="class01">div标签001</div>
<div class="class02">div标签</div>
<span class="class01">span标签class01</span>
<span>span标签</span>


<!--
  组合选择器

  修改class="class03"的div标签和id="id001"的所有span标签
  字体颜色为蓝色，20px，边框1px黄色实线
-->

<div class="class003">div标签class03</div>
<span id="id001">span标签</span>
<div>div</div>
<span>span</span>

<div class="class04">div标签</div>

<a href="http://www.baidu.com">百度</a>

<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
  </tr>
</table>

<ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
</ul>

</body>
</html>