Web开发之CSS样式基本知识

来源：互联网发布：薛之谦的回应知乎编辑：程序博客网时间：2024/06/06 03:21

本文根据慕课网视频整理：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>

三种写法的优先级：

对于同一个元素我们同时用了三种方法设置css样式，优先级按照就近原则（离被设置元素越近优先级别越高）
但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下，关于权值的问题以后再讨论

0 0