精通Jquery，Css详解及回顾(2)

CSS：中文名，层叠样式表，用来控制HTML中元素的呈现方式。

常用的CSS属性有：Color，backGround-color，front-size，border等

刚入门是没有必要知道元素的每个属性及其意义，只要做到使用时会查就可以了，毕竟人不是机器。

Css中的行内样式，是给元素设置样式的最直接方法，

做法：在元素的标签中通过style属性设置一些你所想要获取到的值，这种做法且看起来简单命令易上手，缺点是当元素需要移植或修改时十分麻烦，难以维护，这样修改样可能会影响到元素内容。

行内样式代码：

<div id="buyContract_page" style="margin:0px;padding:0px;" class="div_page">

在上述的代码中style表示要使用CSS，其中的margin和Padding都是div这个元素的样式属性，冒号后面表示的是样式属性的值，不同的样式属性之间要用分号分开，一个style中可以用多个样式属性。

这种行内样式的写法只能针对当前元素，对其他元素无效，即一对一。

Css中的内嵌样式，内嵌样式对行内样式进行了改进，可以让多个元素使用同一种style设置，即一个设置多处元素生效（同一HTML），简称即一对多。

内嵌样式告诉浏览器，当前样式可以应用到HTML中的哪些元素中。

内嵌样式的代码最好放到head中，这样能够在让开发者第一时间看到，并且符合内容和控制分离的原则，这样做完全不会影响到元素内容。

其次，在给元素设置样式的时候，需要使用【#】标记、【.】、【元素】标记先获取到html页面中的元素，进而设置相关样式。

【#】标记：例如#li，指的是当前html页面中的元素id=li的元素将使用{}里面的style属性。

【.】标记：例如.divcss5_left，指的是当前html页面中，元素的class=divcss5_left的元素将使用{}里面的style属性。

【元素】标记：例如h1{}，指的是当前html页面中，h1元素将使用{}里面的style属性。

这里要重复再说一下，一个元素只能有一个id，但能有多个class属性值。

内联样式代码：

<head>
    <title>index2</title>
    <meta charset="UTF-8">
    <!--自适应界面,如果出现,在某些设备出现界面偏小的话,检查一下有没有加入这句 -->
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">

    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
    <style>
         #li {
             text-align: center;
         }
	 h1{}
         .divcss5_left {
             float: left;
         }
    </style>
</head>

外联样式：对内联样式进行改进，让一个CSS样式表在多个html文件中生效，该文件以css为后缀名。

如果下述代码在一个名叫abc.css文件中，如果你想在html中引用该文件，你就要在html中用link添加该语句，该语句最好放到head中，做到显示分离。

abc.html

<head>
    <title>index2</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="../abc.css" />
</head>

abc.css

body, html { font-size: 100%; 	padding: 0; margin: 0;}

.clearfix:after {
	clear: both;
}

body{
	background: #494A5F;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}
a:hover,a:focus{color:#74777b;text-decoration: none;}

这里要说一下，当html引用了3个外联样式文件，且这3个都对某个元素进行了样式设置。

则他们的导入顺序很重要，即在head标签中的排序顺序很重要，谁排在最后，谁对元素的样式设置就会生效。

其次，如果一个HTML中的使用了外联样式，内联样式，行内样式，则最后生效的行内样式。

除了上述3个层叠样式，还有另外两个，一个是浏览器样式，一个是用户样式。

浏览器样式：是浏览器定制的样式，即同一页面在不同浏览器的展示效果是不一样的，称之为浏览器样式

用户样式：部分浏览器支持用户指定页面为其他样式，该功能不经常使用，特殊用户会使用这点。

浏览器的样式显示顺讯也可以使用important进行设置，比如，行内样式的优先级设置为低于内联样式，该属性不常使用，了解即可。

HTML中的经常使用的CSS核心选择器：

* 选取所有的元素，这个写法一般用来设置html中的所有元素字体

<type> 例如：h1 元素， type 指的是元素类型，选择指定的元素

.<class> 例如：.classA ，指的是元素的class值，选定元素的class为ClassA的元素

<type>.<class> 例如：h1.classA 选取h1标签中class为classA的元素。

#<id> 例如：#className 选取页面中元素id为className的元素

CSS中的其他选择器：

属性选择器，关系选择器，伪元素和伪类选择器，联合选择器和反选择器，这些选择器使用的也很频繁，这里不再一一介绍。

当使用用以优先级的选择器设置样式时，浏览器就会评估设置规则的专一程度，转移程度越高，就使用哪个。

专一程度的3种判断方式：

选择器中id的出现次数，选择器中出现的其他属性和伪类个数，选择器中出现的元素名称和伪元素名字个数。

下面的案例中使用了p选择器，也是用了p.no1 选择器，p.no1选择器的优先级比p高，p.no2在p.no1后执行，所以最后p.no2生效

<html>
	<head>
		....
		<style>
			p {color:white;}
			p.no1 {color:red;}
			p.no2 {color:yellow;}	
		</style>
	</head>
	<body>
		...
			<p class="no1 no2">xxxxx</p>
		...
	</body>
</html>

请注意：转移程度只在同一CSS层叠样式级别有效，在行内和内联，内联和外联这种样式类型无效。

CSS中的颜色，字体大小不再阐述。

CSS中的长度要提一下：

em:元素字号的长度，是相对字体大小

ex:元素字体中小写字母的高度

rem：相对于根元素的高度

px:css像素，一般我们认为是屏幕上可测量的最小的点，即图像元素。而css是这样定义的，即隔一手臂长看一个96dpi显示设备上一个真实像素的视角，这个解释含糊不清，简直坑爹，没有实用价值，不过主流浏览器不这样使用，都把一个像素认为是一个1/96英寸，即windows标准像素密度。

%：百分比长度。

CSS的基本内容都在这里，一些例如边框之类的属性不再阐述，需要学习的人可以点击去下面的连接去学习更多知识。

https://www.runoob.com/css/css-tutorial.html

精通Jquery，Css详解及回顾(2)

猜你喜欢