详细讲解CSS基础知识点
May 17, 2018 pm 09:47 PM一、概念
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中文网其他相关文章！
热门文章
热门文章
热门文章标签
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
