1.《html页面引入CSS》
------------------------------
外部引入:
<link rel="stylesheet" type="text/css" href="css.css" />
注释:(text/css ->文本/css,即css文本)。。REL属性用于定义连接的文件和HTML文档之间的关系,只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持。前面的两个一般是固定的。 href="css名.css"
内部嵌入:
在<head>标签内使用<style type="text/css"> css代码 </style>
行内嵌入:
在标签行内使用 style="css代码;css代码;"
2.《给html标签编写样式》
------------------------------
直接给html标签写样式.:标签选择器 eg:p{ }
四个基本样式:
width:宽度,控制html标签宽度
height:高度,控制html标签高度
color:文字颜色
background:背景颜色
单位:px 和 百分比
3.《id选择器与class选择器》
------------------------------
id选择器: <p id="info">段落</p> #info{}
class选择器:<p class="item">段落</p> .item{}
区别:注意:①类名的第一个字符不能使用数字。
②id选择器只能应用一个对象,而类选择器是可以应用到多个样式中的 ③当页面中用JavaScript或者要动态调用对象的时候,要用到id,所以要根据自己的情况运用
后代选择器:
父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
}
选择器之间用空格间隔,以后用比较的多选择器优先级
注意:id选择器优先级最高,标签选择器优先级最低,如下所示:id选择器 > 类选择器 > 标签选择器
注意:选择器优先级不考虑选择器的先后顺序
4.《CSS控制文字显示》
------------------------------
font-size:文字大小 值:px
font-weight:文字加粗 值:normal(不加粗),bold(加粗)
font-style:文字样式(倾斜) 值:italic(倾斜),normal(不倾斜)
color:文字颜色 值:颜色
line-height:文字行高 值:px
5.《CSS控制超链接显示》
-------------------------------
a{} :默认样式
a:link {} :普通的、未被访问的链接
a:visited {} :用户已访问的链接
a:hover {} :鼠标指针位于链接的上方
a:active {} :链接被点击的时刻
注意:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后 (l v h a)
text-decoration: 下划线 值:none(无下划线),underline(有下划线)
6.《CSS控制列表显示》
-------------------------------
list-style-type:none; 列表去掉小圆点
7 CSS控制(背景)图片显示
background-image:url(“”); 背景图片
background-color:
background-repeat: no-repeat(背景不循环),repeat-x,repeat-y
背景位置:left,center,right 在x轴
Top,center ,bottom 在y轴 (先x后y)
合并写法:eg:
background: orange url(“xxx.jpg”) no-repeat left center
背景 颜色 图片 重复 先x 后y
8CSS盒子模型[margin padding border]
外边距:margin-top (right,left,bottom) (区域与区域之间的空隙)
margin:
内边距:padding:(控制 标签 与 内部数据 之间的空隙) (上 右 下 左)
边框:border: 1px solid (dashed虚线) blue;
边框: 宽度 类型 (实线,虚线) 颜色;
border-bottom(right,left,top):
- CSS进行页面布局[float] [浮动布局和清理]
float:left(right,both)
一个博客上https://www.cnblogs.com/ForEvErNoME/p/3383539.html
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,漂浮于普通流之上,像浮云一样,但是只能左右浮动。