CSS基础整理
一、CSS概述
层叠样式表
作用:修饰html的标签
主要学习内容:
(1)CSS(选择器)的写法:css是如何控制html标签的样式
(2)CSS的属性和属性的取值
二、选择器
1、类选择器
格式:. + 类名 + {样式表}
要求:对应html的标签中 必须有class属性
例:
html标签 <div class = "cls"> </div>
CSS类选择器 .cls{样式表}
注:类选择器:一类的标签元素
2、ID选择器
要求:html标签中必须有id属性
CSS格式:# + id名称{样式表}
注:id是唯一标识,一个元素
3、元素选择器
CSS格式:元素名{ }
例:
<p> </p>
CSS样式: p {样式表}
4、属性选择器
特殊的元素选择器
CSS格式:元素选择器 [ 属性名 = ” ” ]
5、后代选择器
CSS格式:选择器 后代选择器
另:伪类
CSS 伪类用于向某些选择器添加特殊的效果。
例:
锚伪类
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
三、CSS中常用的属性
1、背景
background-color :设置背景色
background-image :设置背景图像
例:url(abc.gif)
2、文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进
color :设置文本颜色
line-height :设置行高
text-align :对齐元素中的文本
left:把文本排列到左边
right:把文本排列到
center:把文本排列到中间
text-decoration :向文本添加修饰
none:默认 定义标准的文本
underline:定义文本下的一条线
3、设置字体的大小、字体风格(如斜体)和字体变形(如小型大写字母)
font-family :设置字体系列
font-size :设置字体的尺寸
font-style :设置字体风格
4、列表
list-style-type :标记的样式
none:无标记
disc:默认 实心圆
circle:标记是空心圆
list-style-image :将图像设置为列表项的标志
例:url("abc.gif"); 注意是否有引号
5、分类
float:定义元素在哪个方向浮动
left:元素向左浮动
right:元素向右浮动
none:默认值。元素不浮动,并会显示在其在文本中出现的位置
inherit:规定应该从父元素继承float属性的值
clear:设置一个元素的侧面是否允许其他的浮动元素
left:在左侧不允许浮动元素
right:在右侧不允许浮动元素
both:在左右两侧均不允许浮动元素
none:默认值。允许浮动元素出现在两侧
inherit:规定应该从父元素继承clear属性的值
display:设置是否及如何显示元素
none:此元素不会被显示
block:此元素将显示为块级元素,此元素前后会带有换行符。相当于 div
inline:默认。此元素会被显示为内联元素,元素前后没有换行符。相当有 span
position:把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
absolute:生成绝对定位的元素,相对于页面
fixed:生成固定定位的元素,相对于浏览器窗口进行定位。
relative:生成相对定位的元素,相对于该元素的当前位置
元素的位置通过 left,top,right 以及 bottom 属性进行规定
visibility:设置元素是否可见或不可见
visible:默认值。元素是可见的
hidden:元素是不可见的
6、尺寸
height:设置元素的高度
width:设置元素的宽度
7、CSS框模型(Box Model)盒子模型
一个元素外面有 padding border margin
padding:内边距 元素到边框的距离
border:边框
margin:外边距 元素之间的距离
内边距或者外边距若设置大小的时候,四个值:
padding-top:10px;上
padding-left:10px;左
padding-right:10px;右
padding-bottom:10px;下
border:设置颜色 边框的风格
例:border:1px solid red;
设置边框的宽度为1px 实线 红色
dashed:虚线
double:双实线