HTML第五次课堂笔记（css）

  一.css是什么

层叠样式表 （Cascading Style Sheets）

优点：①使HTML专注于网页的内容，CSS专注于网页的表现

②提供了丰富的格式化功能

③可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式

二.引入css样式

css样式分为4种：

1.行内样式（直接使用标记的style属性）

style="width:100px;height:100px;background-color:red;"

 2.内嵌样式（在HTML中，使用<style></style>标记，将样式写在<style>标记内）

 3.外链式（将CSS写入单独的一个文件中，注意该文件的文件扩展名为  .css在HTML文档中使用<link>标记引入css文件<link>标记需要指定两个属性：type和rel（relationship））

 

 4.导入样式（使用@import指令可以将css文件中的css样式导入到不同的地方，导入式的结果和直接书写是同样的效果，导入式可以共享样式代码可以在内嵌式里使用导入，也可在css文件中使用）

import和link的区别：

1.从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

优先级：行内样式最大，其次就是哪个最晚引入，哪个优先级就高。

三.选择器

CSS修饰html标签的基础就是选择符，即可以通过多种选择符来选择要修饰的html标签分为以下六种：

1.通配选择器  即所有的标签 语法：*{规则}

 2.类选择器 语法：.className{规则} 注意：也可以在前面添加标签名字，如div.className（之间无空格，和包含选择符区分开）可以为标签指定多个class值，多个值之间用空格隔开

.类名{
   样式属性名：属性值；
}

 3.id类选择器 每个html标签的id都是不一样的 语法：#id{规则}

#id值{
  样式属性名：属性值；
}

 4.标签选择器 即使用标签的名字作为选择符 语法：标签{规则}

标签名{
   样式属性名：属性值；
}

 5.包含选择器 通过标签的嵌套选择标签，只要包含就行 语法：选择符a  选择符b {规则}

选择器E 选择器F{
  样式属性名：属性值；
}

6.分组选择器 标签具有相同的属性值可以使用分组选择器
选择器E，选择器F{
    样式属性名：属性值；
}

 

 四.字体相关样式

1.font-size  字体大小
2.font-family   字体系列
多个字体之间用逗号隔开
英文字体名称中间有空格，用引号引起来
3.font-style  字体风格
    normal 正常
    italic  斜体
    oblique 倾斜
4.font-weight  字体粗细
    normal  正常
    bold  粗体
    bolder  加粗
    100-900  9个层次
    lighter  细体
5.line-height  行高
    单位   px
若无单位，表示倍数

缩写：
font： font-style值  font-weight值  font-size值

 补充：

src和href的区别

1.src 是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用。
2.href 是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。

简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。
使用区别：
src通常用作“拿取”（引入），href 用作 “连结前往”（引用）。
————————————————
版权声明：本文为CSDN博主「陈浩然哦」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43618932/article/details/89182784