前端学习Day 6

css 层叠样式表

一、三种css样式使用方式

1.内联样式
将css的样式直接用在页面元素中,直接作用于这个元素。
缺点:

  • 不符合结构~表现~行为三分离的原则
  • 这种形式不方便于复用
<p style ="color :  
blue; font -size: 20px;  ">  
我是圆圆的爸爸,希望圆圆顺利诞生!</p >

注意:

  • 内联样式以style为开头后接引号,引号内也要符合名值结构,赋值完毕无论几个属性值都要使用分号结束
  • 该样式有且只能作用于该元素,不能作用于其他元素

2.内部样式
将css属性值放置于head元素中,通过选择器作用于网页。

<head >
<style  type ="text/css ">
p{
color: red; 
font-size: 20px;
}
</style >

</head >

<body>
<p>我是圆圆的爸爸,希望圆圆能顺利诞生</p >
</body >

注意:

  • 此处的p 就是css 的选择器,通过确定p 为选择器,网页中所有的p标签均变为设置的样式
  • 内部样式有且只能作用于当前页面
  • 注意选择器的表达规则,也是属于名值结构,同时属性值之后加分号结尾

3.外部样式
将css写入一个独立的css文件,然后通过link标签将其引入作用于当前页面

优点:

  • 通过独立的css文件引入当前目录,可以最大限度地实现了结构和表现分离,复用性最高
  • 可以充分利用浏览器的缓存,加快访问速度

css文件,命名为style.css 具体内容如下:

p {

color: red;
font-size: 20px ;
}

在独立的css 文件中不需要加<style >标签

当前页面引入的方法:


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

前两个属性值是固定的,最后一个才是引入外部样式表

二、css的语法

语法结构=选择器+声明块

  • 大括号之前的元素为选择器,是css发生作用的元素对象

  • 大括号里面是声明块,由一个一个声明组成

声明块实际上就是名值组合,一个名值结构就是一个声明,一个声明块可以有无数个声明

多个声明用分号隔开,名值之间用冒号连接

注意:

内部样式和外部样式代码属于css 代码也就是说内部样式中的代码不属于html代码,不能使用html代码的注释形式() 此时注释应该使用(/* */)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,068评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,315评论 0 3
  • CSS 指层叠样式表(Cascading Style Sheets),是一种用来为结构化文档(如 HTML 文档或...
    神齐阅读 2,134评论 0 14
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,191评论 0 40
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,664评论 0 30