CSS基础知识与用法（一）

最新推荐文章于 2024-06-27 17:00:15 发布

香蕉芭辣

最新推荐文章于 2024-06-27 17:00:15 发布

阅读量280

点赞数 1

文章标签： CSS基础知识 CSS的使用方法 CSS特征

本文链接：https://blog.csdn.net/weixin_44049725/article/details/102536768

版权

CSS是什么？

CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，以称之
为层叠样式表（Cascading Stylesheet）简称CSS。在网页制作时采用SS技术，可以有效
地对页面的布局、字体、颜色、背景和其它效果实现更加精的控制。只要对相应的代码做
一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式，
实现HTML和CSS的分离，内容和表现分离。

CSS的作用：

CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设
计布局的更加美观漂亮。

CSS的特征：

继承性：
子元素可以直接使用父元声明好的样式
大部分css样式属性是可以被继承
层叠性：
一个元素可以声明多个规则，如果样式不冲突的情况下
优先级：
对一个元素声明了多个样式规则，且是同一个样式最后元素到底听谁的义样式有冲突
的情况下按照优先级来解析
高：内联样式
中：外部样式内部样式（就近原则，后来者居上）
低：浏览器缺省样式 (UA Stylesheet)

CSS的使用：

语法规则： 属性名 : 属性值; -----样式的声明方式（注意所有标点符号要在英文状下才
正确）
1、内联样式：
在标签的style属性中声明样式并不推荐使用，因为复用性太差了，虽然比较灵活，但是可
拓展性和可维护性极差。（优先极高）。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <h1 style="background-color: pink; width: 200px; color: #FF7E22;">这是内联样式</h1>
 </body>
</html>

说到这里还得说一下关于HTML属性和CSS样式的使用原则。因为在HTML
中一些对页面进行修饰美化操作上，CSS能做到的而HTML的属性也可以做到，但是W3C
建议尽量使用CSS样式取代HTML属性，除非是无法用CSS取代的，比如说比较经典的一个：
table中的td如果需要进行单元格合并的话就必须得在标签上使用td的属性，而CSS就做不到。

<table border="1" cellspacing="2" cellpadding="4" width="200px">
   <tr>
    <!--跨列合并：colspan是水平方向上的合并-->
    <th colspan="3">学生信息表</th>
   </tr>
   <tr>
    <td>年级</td>
    <td>班级</td>
    <td>姓名</td>
   </tr>
   <tr>
    <!--跨行合并，rowspan是垂直方向上的合并-->
    <td rowspan="2">大一</td>
    <td>101</td>
    <td>张三</td>
   </tr>
   <tr>
    <td>102</td>
    <td>李四</td>
   </tr>
</table>

在运行结果如图：

2、内部样式：
适用于写小型案例，只在一个页面中可以复用将样式声明写在style对标签中须添加在head中。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   /*这是标签选择器*/
   h1 {
    width: 200px;
    height: 100px;
    font-size: 25px;
    color: red;
   }
  </style>
 </head>
 <body>
  <h1>这是内部样式</h1>
 </body>
</html>

3、外部样式
a) 创建一个单独的样式表文件保存样式声明的xxx.CSS文件
b) 在需要的页面中引入样式表文件，在head中用<link/ >标签引入CSS文件。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/xxx.css"/>
  <title></title>
 </head>
 <body>
  <h1>这是外部样式</h1>
 </body>
</html>

xxx.CSS文件中的代码：

/*这是标签选择器*/
h1{
 width: 200px;
 height: 100px;
 font-size: 25px;
 color: red;
}