HTML5&CSS3-充实笔记0503

HappyAndy_Lo

787

收藏 2019-05-03

CSS应用方法：

行内声明，通过style属性（适用于少数几行HTML需要）
内嵌声明，在head内，使用<style>标记。麻烦之处在于仅在当前HTML页面有效
链接外部样式文件

<link rel="stylesheet" type="text/css" href="path/file.css">
导入外部样式文件 <head> <style type="text/css">  </style> </head>
两者差别，前者是HTML标记，可用JavaScritp语法控制，后者是CSS语法

前面的三种方式都可以串接混合使用

认识CSS选择器

标记名称；
全局选择器（*）；
类（Class）选择器
Id选择器
属性选择器

标记名称：就是  类似于 div{属性}  的设置，会将所有相同的标记都应用同一种样式
全局选择器：  用*字符来选择所有标记？？？？
Class选择器：HTML标记里，要加入class属性。定义class使用.class名 { ....}  方式

如果希望仅在某一种标记上应用Class选择器的样式，可以在Class选择器前加上标记
即：标记.class类名{ 样式列表 }

Id选择器：必须在标记中，加入ID属性。ID名称是自己命名的，以#id属性名 {  样式列表 } 定义
Id选择器通常用来识别组件，就像组件的身份证一样，尤其是利用像JavaScript之类的动态网页语法来控制HTML组件。在同一份HTML文件中，id名称必须唯一

属性选择器：属于高级筛选，用来筛选标记中的属性
如：指定超链接<a>的背景颜色为黄色，仅应用于有target属性的组件
a[target] { background-color:yellow; }

属性选择器，有6种筛选方式：

[atrribute="value"] 属性等于value
[atrribute~="value"]  属性包含完整value
[attribute|="value"] 属性等于value或者以value开头
[attribute^="value"]  属性开头有value
[attribute$="value"]  属性最后有value
[attribute*="value"] 属性中出现value

反向选择    :not (p) { color: red; } 整个文件中除了<p>标记外，其他标记都用同一样式。