CSS基础知识

最新推荐文章于 2024-06-07 19:12:10 发布

一斤草莓吃光光

最新推荐文章于 2024-06-07 19:12:10 发布

阅读量363

点赞数

分类专栏： HTML与CSS 文章标签： css 标签

本文链接：https://blog.csdn.net/sinat_36713319/article/details/53612477

版权

HTML与CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、CSS的样式属性
主要有两种
1、布局属性，例如边距、对齐方式等
2、格式化属性：例如字体、颜色等
二、将样式表应用到web的方法
主要有三种
1、外部
使用<head></head>区域内的一个<link/>标签，例如

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

href指的是.css文件的存储路径。
2、内部
首先介绍样式类或者是样式ID、
样式类示例：

h1{
  font:20pt "Times New Roman";
  line-height:10pt;
  color:red;
}

h1是选择器。
也可以将一种样式类分为多种类型，用法就是在样式类名后面加 .描述性类名称
示例：

h1.first{
    font:20pt "Times New Roman";
  line-height:10pt;
  color:red;
}
h1.second{
  font:50pt "Arial";
  line-height:20pt;
  color:green;
}

在引用这种样式类时，用class来确定使用类型

<h1 class="first">this is an example</h1>
<h1 class="second">this is another example</h1>

样式ID示例

h1#heading {font:20pt "Times New Roman"}

应用时用元素的id属性

<h1 id="heading">this is a title</h1>

样式ID只能应用于web页面上的一个元素，一般用来定义页面的特定部分，例如标头、脚注文本等，这种特定部分一般在页面中只出现一次，因此使用样式ID更为合适。
内部的样式表一般封闭在<sytle></stytle> 标签内，然后之间将这一部分直接放到html文档中，这种方式的样式表必须出现在html文档的<head></head> 标签内。

<!DOCTYPE html>
<html>
  <head>
    <title>css_test.html</title>
    <style type="text/css">
    h1.firsttitle{
       font:50pt "Times New Roman";
       font-weight:bold;
       line-heght:20pt;
    }
    h1.secondtitle{
       font:30pt "Times New Roman";
       font-weight:bold;
       line-heght:20pt;
    }
    </style>
  </head>

  <body>
    <h1 class="firsttitle">This is my HTML page. </h1><br>
    <h1 class="secondtitle">Welcome to my page </h1><br>
  </body>
</html>

样式如下：
这里写图片描述

3、内联
通过style属性直接把规则放在html标签中

<!DOCTYPE html>
<html>
  <head>
    <title>css_test.html</title>
  </head>

  <body>
    <p>
When I was younger I was entranced with stories of magic. <span style="color:red">I devoured books where wizards 
and warriors battled the powers of darkness in strange worlds.</span><div style="font-weight:bold">I rejoiced when they triumphed bringing peace and happiness to their lands.</div>
<!-- 从下图可以看出span和div标签的唯一区别在于span对于标签内的内容不做任何操作，而div会强制换行 -->
    </p>
  </body>
</html>

这里写图片描述

关于三种方式的优先级：一般来说，层叠样式表的作用开始于外部样式表，然后被内部样式表覆盖，最后被内联样式表覆盖。也就是说优先级内联>内部>外部。

<!DOCTYPE html>
<html>
  <head>
    <title>css_test.html</title>
    <style type="text/css">
    p{  
       font:20pt "Times New Roman";
       color:green;
    }
    </style> 
  <body>
    <p>
When I was younger I was entranced with stories of magic. <span style="color:red">I devoured books where wizards 
and warriors battled the powers of darkness in strange worlds.</span>I rejoiced when they 
triumphed bringing peace and happiness to their lands.
    </p>
  </body>
</html>