CSS那些事儿——选择符

       今天学习CSS基础部分，主要关于选择符。写代码的过程中，发现了一个问题：在写style部分的 CSS属性选择符格式是标签元素后紧跟一对中括号，是紧跟！如果出现空格，就不能定位到该标签。

 

 

*在写CSS过程中，尤其是class的命名一定要大小写一致，不能html与css里不一样（区分大小写）。错误示例：今天出现了一个情况就是自己在html中命名class为 V ，在css里却是 v 。

 

*属性选择符，E[attr]      eg:  img[src]

*

例如：  p[title~="css"]   在下面起作用的有 1、3。（翻译：在p标签中，选择title值中包含空格与“css”的部分）

<p title="css xhtml" id="1">title属性值为xhtml css的段落标签p</p>
<p title="css+xhtml" id="2">title属性值为css xhtml的段落标签p</p>
<p title="Cascading Style Sheets（叠层样式表）的简称为 css" id="3">title属性值为“Cascding Style Sheets(叠层样式表）的简称为css”的段落标签p</p>

E[attr|="value"] 是指E标签中，选择attr中以“value-”开头的。

*ID选择符是以（#）为前缀，类是以（.）为前缀进行选择。

 

 

*选择符的权重值优先级别：

1. 标有！important关键字声明的属性。

2.HTML中的CSS样式属性。

3.作者编辑的CSS文件样式属性。

4.用户设置的样式。

5.浏览器默认的样式。

 

 

 

 

 

 

CSS引入到HTML页面方式：

引入方式一般分为3种，任何一种都有其独特有大作用，分别为：

1）行间样式，直接写在标签元素的属性style中。

2）内嵌样式表，将样式表写在<style></style>标签之内。

3）外链样式表，通过<link/>方式外链CSS样式文件。

4）导入样式表，通过@import 关键字导入外部CSS样式文件。

例如：<link rel="stylesheet" href="css/myCSS.css" type=text/css" media="all"/>其中rel属性定义该标签关联的样式表标签；media属性是设置属性调用的样式文件主要是针对什么设备而使用的。media=“screen”是针对显示器的样式。

<style>

@impirt url("css/mycss.css");/*导入外部CSS文件*/

</style>

/*以下内容是mycss.css文件中的内容*/

@import url("base.css"); /*通过外部CSS文件再次导入另外一个CSS文件base.css*/

转载于:https://www.cnblogs.com/yinpan/p/4423172.html