css基础知识

  1. 1.CSS简介
  2. 2. span
  3. 3. CSS代码语法
  4. 4. CSS注释代码
  5. 5. 内联式css样式
  6. 6. 嵌入式css样式
  7. 7. 外部式css样式
  8. 8. 三种链接方式的优先级
    1. 优先级

1.CSS简介

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
eg:

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

2. span

span就是为了标记出特殊的文字,然后便于css统一设置。

第一步:把文字用括起来。
第二步:

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

3. CSS代码语法

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

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

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

注意:
1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:

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

4. CSS注释代码

/*注释语句*/

5. 内联式css样式

eg:

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

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

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

6. 嵌入式css样式

嵌入式css样式,就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色:

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

注意:
嵌入式css样式必须写在之间,并且一般情况下嵌入式css样式写在之间。如右边编辑器中的代码。

7. 外部式css样式

外部式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. <link>标签位置一般写在<head>标签之内。*/

8. 三种链接方式的优先级

优先级

内联式 > 嵌入式 > 外部式

注意

但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。
总的来说,就是--就近原则(离被设置元素越近优先级别越高)。
但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下。

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 zzzqqqyyy2002@163.com

×

喜欢就点赞,疼爱就打赏