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