-
eg
<a style="font-size:40px;color:#ffad2a">这是元素内嵌样式<a>
-
文档内嵌样式(一般放在<head>里)
eg
<style type="text/css">
a{
font-size:40px;
color:#ffad2a;
}
<style> -
外部样式(需要创建一个新的CSS文档,如a.css文档,然后引入至html文档 ,如<link rel="stylesheet" type="text/css" href="a.css">)
eg
a{
font-size:40px;
color:#ffad2a;
} -
样式表层叠方式优先考虑元素内嵌样式表,然后是文档样式表,最后是外部样式表(元素内嵌样式表>文档内嵌样式表>外部样式表)
-
导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用**链接式**时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此**显示出来的网页从一开始就是带样式的**效果的,它不会像导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。
所以还是推荐用链接式
选择器
-
选择所有元素
style元素:*{}
-
根据类型选择元素
style元素:a{}
body元素:
<a>这是根据类型选择元素</a>
-
根据类选择元素
style元素:.class1{}
body元素:
<a class="class1">这是根据类选择元素</a>
-
根据ID选择元素
style元素:#id1{}
body元素:
<p id="id1">这是根据id选择元素</p>
-
根据属性选择元素
style元素:[href]{}
body元素:
<a href="text.html">这是根据属性选择元素</a>
-
选择器动作
-
选择器仅出现在文档内嵌样式或外部样式中
边框和背景
-
边框设置
-
border-width:边框的宽度
-
border-style:边框的样式类型
-
border-color:边框的颜色
-
border:宽度,样式,颜色
-
border-top:上边框
-
border-radius:圆角边框
-
-
背景设置
-
background-image:背景图片
-
background-repeat:背景重复方式
-
repeat-x:在水平方向重复
-
repeat-y:在垂直方向重复
-
no-repeat:仅显示一次
-
repeat:默认,在水平,垂直方向重复
-
-
background-position:背景图像的起始位置
-
center,等
-
-
background-attachment:背景是否随滚轮移动
-
scroll:默认,会随着滚轮而滚动
-
fixed:不会
-
-
background-color:背景颜色
-
文本样式
-
text-aline:对齐文本
-
center,left,right
-
-
direction:文本方向
-
letter-spacing:字母(文字)间距
-
word-spacing:单词间距(仅英文单词)
-
line-height:行高
-
text-indent:首行缩进
-
text-decoration:文本装饰
-
underline:下划线
-
overline:上划线
-
line-through:中划线(删除线)
-
-
text-transform:文本大小写转换
-
capitalized:首字母大写
-
uppercase:全部字母大写
-
lowercase:全部字母小写
-
-
font-family:字体
-
font-size:大小
-
font-style:字体样式
-
oblique:倾斜
-
italic:斜体
-
-
font-weight:字体粗细
-
text-shadow:文本阴影(水平偏移,垂直偏移,模糊程度,模糊颜色)
盒子模型
盒子模型:每一个小城的组件都可以看作是一个盒子模型
组成:content padding margin border
-
contain:内容,由宽(width)与高(height)组成
-
view组件的宽高会由内容自动撑大
-
可以设定宽高来限制view
-
应用:放图片的时候,通常会拿一个view限制它大小
-
-
padding:内边距,内容到边框的距离(上下左右)
-
直接使用padding设置间距的话,默认会自动撑大宽高,撑大的大小为间距的大小
-
使用box-sizing,可以使得间距的高度从内容的高度里面减
-
-
margin:外边距边框到下一个边框的距离(上下左右)
-
border:边框样式、颜色、粗细、圆角、阴影
杂
-
我又肥来了,由于之前在实训,就耽搁了(其实就是实训前我懒了),然后又开始了
-