端午小长假--前端基础学起来03CSS为网页添加样式

Posted 糖葫芦有点甜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了端午小长假--前端基础学起来03CSS为网页添加样式相关的知识,希望对你有一定的参考价值。

定义:用于定义html内容在浏览器内的显示样式,如文字大小,颜色,字体

  •  设置样式:将要设置样式的内容用<span></span>样式括起来,然后再head中设置span

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


<body>
<p>慕课网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
</body>

语法:由选择符和声明组成,声明又由属性和值组成。p是选择器,将这个选择器中的内容设置样式,不影响其他选择器中的内容样式。{}是声明,

p:{

color:blue;

font-size:12px;

}

 注释代码:用/*注释语句*/(html中使用<!--注释语句-->)

 样式插入形式:优先级:内联式>嵌入式>外部式

  •  内联式:一两句话的样式修改

语法:将样式直接写在HTML的标签中,并且是在style=“”双引号中,如果有多条css样式,写在一起用分号隔开

<p style="color:"blue";font-size:12px">颜色蓝色,字号12</p>

  • 嵌入式:好几句话的样式修改

语法:将样式写在<style></style>标签之间,放在<head></head>

<style type="text/css">

span{

color:red;

}

<body>
<p>慕课网,<span>超酷的互联网</span>IT技术免费学习平台<span>服务及时贴心</span>内容专业<span>有趣易学</span>。
</body>

  • 外部式

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

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

注:(1)css样式文件名称要以有意义的英文字母命名,如 main.css

  (2)rel=“stylesheet” type=“text/css” 是固定写法不可修改

  (3)<link>标签位置一般写在<head>标签之内

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

style.css文件:

span{
color:red;
font-size:50px;
}

优先级:内联式>嵌入式>外部式

前提:三样式在css样式是在相同权值的情况下,待补充

嵌入式>外部式 的前提:嵌入式css的样式位置在外部式的后面,如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
color:red;
}
</style>
</head>

总之:就近原则(离被设置元素越近优先级越高)

 

以上是关于端午小长假--前端基础学起来03CSS为网页添加样式的主要内容,如果未能解决你的问题,请参考以下文章

端午小长假--前端基础学起来04CSS选择器

端午小长假--前端基础学起来02与浏览器交互,表单标签

css与javascript重难点,学前端,基础不好一切白费!

css与javascript重难点,学前端,基础不好一切白费!

web前端开发语言介绍

学javascript需要啥基础