Web开发之CSS样式基本知识

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

LWK_Vanish

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

阅读量476

点赞数

分类专栏： Web开发文章标签： html css web开发

本文链接：https://blog.csdn.net/lwk520136/article/details/57485918

版权

Web开发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文根据慕课网视频整理：http://www.imooc.com/code/609

定义

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等

语法

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p{
    font-size:12px;
    color:red;
}

三种写法

内联式

就是把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red">这里文字是红色。</p>

css样式代码要写在style=”“双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

<p style="color:red;font-size:12px">这里文字是红色。</p>

嵌入式

就是直接把css代码写在该文件中，如下面的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">/*下面所有引用<span>标签的文字都会变为蓝色*/
span{
   color:blue;
}
</style>
</head>
<body>
    <p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

外部式

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

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

注意：
1. css样式文件名称以有意义的英文字母命名，如 main.css。
2. rel=”stylesheet” type=”text/css” 是固定写法不可修改。
3. 标签位置一般写在标签之内。

完整示例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" /><!--引用外部的css文件-->
</head>
<body>
    <p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>