认识CSS样式

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

例子:p{

font-size:20px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/

}

注:

<style type="text/css">... </style> 位于<head>与</head> 之间。
type="text/css"它是CSS样式的标记。
type->类型,这里是style的属性。
text/css ->文本/css,即css文本。

type="text/css" 表示的是浏览器的解释方式,如果不定义的话,有些CSS效果 浏览器解释得不一样。

<span>是行内元素,没实际效果,就是用来分割行内内容,跟<div>不同,<div>如果在行内使用会自动换行。

在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用<!--注释语句-->)。

CSS代码语法

css 样式由选择符声明组成,而声明又由属性组成,如下图所示:选择符{属性 声明 值}

选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。

声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:

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

 
 

从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。

内联式:

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

嵌入式:嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。

<style type="text/css">
span{
color:red;
}
</style>

外部式:

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

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

注意:

1、css样式文件名称以有意义的英文字母命名,如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

总结:

内联:<sapn style="color:red;font-size:20px;"><sapn>
嵌入:<style type="text/css">span{color:red;font-size:20px;}<style>

外部:<link href="style.css" rel="stylesheet" type="text/css">

三种方法的优先级:内联式>嵌入式>外部式,前提是嵌入式在外部式后面。

猜你喜欢

转载自blog.csdn.net/weixin_41626938/article/details/80419327