一、概念
CSS(Cascading Style Sheets):CSS样式后层叠样式表,层叠:使用不同的添加方式给同一个HTML标签添加样式,所有样式共同作用于该标签;样式:给HTML标签添加需要显示的效果。
主要用于设置HTML页面中的文本内容、图片外形以及版面的布局等外观显示样式。
作用:CSS使页面更美观;CSS+Div使布局更灵活。
规则:样式选择器严格区分大小写,但属性和属性值不区分
多个属性用英文分号隔开
若属性值由多个单词组成,用英文引号括住
样式选择器如下:
<font style="color:red;size:14;"></font>
二、引入CSS样式
1.行内样式
<body> <!--行内样式--> <font style="color:red">浅笑安然</font><br /> </body>
2.内部样式
<head> <meta charset="UTF-8"> <title></title> <!--内部样式--> <style type="text/css"> font{ color: red; } </style> </head>
3.外部样式
引用外部样式:
<head> <!--外部样式--> <link rel="stylesheet" type="text/css" href="../css/outer.css"/> </head>
CSS文件设置:
/*font样式设置*/
font{ color:green; }
优先级:行内样式优先级最高,内部样式和外部样式就近原则
三、选择器
1.元素选择器
<font >浅笑安然</font> [html] view plain copy /*元素选择器*/ font{ color: red; }
2.ID选择器:#id名{}
<font id="flower">心若浮沉</font> [html] view plain copy /*ID选择器*/ #flower{ color: blue; }
3.类选择器:.class类名{}
<font class="happy">清风自来</font> [html] view plain copy /*类选择器*/ .happy{ color:gold; }
4.属性选择器:标签名[属性='属性值']
文本:<input type="text" name="texts"/>
/*属性选择器*/ input[type=text]{ background-color: brown; }
5.包含选择器:父代标签 子代标签
<p class="day"> <font> 今天天气好晴朗 </font> </p>
/*包含选择器*/ .day font{ color:orangered; }
四、CSS样式
1.border width heigh
2.display:block块级属性 inline行级属性 none隐藏属性 inline-block:在行里的块级元素,有宽度
块级元素p ;行级元素span
3.字体:color font-size background-color
4.float:浮动 clear:清楚浮动
五、盒子模型
margin:外边距,盒子与盒子,顺时针设置,若没有设置则按其对称来
border:边框线
padding:内边距,盒子与内容
盒子模型就是我们常用的盒子,现实生活中它既有自己的边框厚度,有与里面物体的间隔,也有盒子本身与外界的距离。
小结:
CSS层叠样式就是多种样式叠加到一起,共同作用于该标签,无论是选择器的使用,还是属性设置以及盒子模型的运用,根本都是为了改变HTML页面的样式,多种力量作用产生美观页面的效果。
相关文章:
以上就是详细讲解CSS基础知识点的详细内容,更多请关注php中文网其它相关文章!