什么是div
特点独自占一行
独自不能实现复杂效果, 必须结合CSS样式进行渲染行级元素行内元素
span中的数据 span外的数据
CSS介绍CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩,布局更加灵活自如。
简单理解:
CSS 可以美化 HTML , 让 HTML 更漂亮, 让页面布局更简单。样式: 给HTML标签添加需要显示的效果
层叠: 使用不同的添加方式, 给同一个HTML标签添加样式. 最后所有的样式都叠加到一起, 共同作用于该标签
CSS样式规则
选择器: 用于指定CSS样式的HTML标签 花括号内是对该对象设轩的具体样式
属性: 对指定的对象设置的样式属性. 如字体大小,文本颜色等
属性和属性值以"键值对"的形式出现
属性和属性值用英文冒号" : "分开
多个"键值对"之间用英文分号" ; "进行区分
h2 {
color: red;
font-size: 100px;
}
注意事项CSS样式"选择器"严格区分大小写. 属性和属性值不区分大小写
多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略.但是,为了便于增加新样式, 最好保留
如果属性的值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号
p{ font-family:"Times New Roman";}
在编写CSS代码时,为了提高代码的可读性,通常会加上CSS注释
/* 这是CSS注释文本, 不会显示在浏览器窗口中 */
属性的值和单位之间是不允许出现空格的, 否则浏览器解析时会出错.
h1 {font-size:20 px} /* 20和单位px之间有空格 */
引入CSS样式CSS使用非常灵活. 既可以嵌入在HTML文档中, 也可以是一个单独的文件.
如果是单独的文件, 则必须以.css为扩展名
CSS和HTML的结合有以下3种常用方式
行内样式行内样式, 是通过标签的style属性来设置元素的样式
我是应用行内CSS样式的三级标题
内部样式内部样式又称为内嵌式, 是将CSS代码集中写在HTML文档的
头部标签体中, 使用我是二级标题,我要用CSS啦
内嵌式CSS样式只对其所在的HTML页面有效, 可以对多处标签统一设置样式.因此, 仅设计一个页面时, 使用内嵌式是个不错的选择.
但如果是一个网站, 不建议使用这种方式, 因为它不能充分发挥CSS代码的重用优势
外部样式外部样式又称为链入式, 是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中, 通过link标签将样式链接到HTML文档中
链入式最大的好处是,同一个CSS样式表可以被不同的HTML页面链接使用, 同一个HTML页面也可以通过多个标记链接多个CSS样式表
三种方式的优先级
行内样式 > 内部样式|外部样式 (谁写在后面就使用谁, 后面的会覆盖前面的)