css基本样式
/* */css内容注释
选择器{属性:值;}
width:px;宽度
height:px;高度
px->像素
%->百分比
body{background-color :;}可以改变浏览器窗口背景颜色
内联样式
在html标签上添加style属性实现的
style=""
内部样式
在<style>标签内添加的样式
<style></style>
外部样式
引入一个单独的css文件
通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性资源的地址。
(1)link rel="stylesheet"href="css文件夹/文件>
(2)<style>@import url(css文件夹/文件)</style>
css颜色表示
background-color:;背景颜色
color:;颜色
transparent透明颜色
(1)单词表示法:red、blue、green、yellow……
(2)十六进制表示法:由0123456789 abcdef组成,比如#5ac87f、#0f0f0f……
(3)RGB三原色表示法:红绿蓝用rgb表示()()()取值范围0-255
css背景样式
background-color:;背景颜色
background-image:url( );背景图片
(1)background-repeat:;背景图片平铺
repeat-x x轴平铺
repeat-y y轴平铺
no-repeat 不平铺
(2)background-position:;背景图片的位置
x轴( )px y轴( )px
x轴100% y轴100%
x轴 left 左 center中间 right右
y轴 top上 center中间 bottom下
(3)background-attachment:;背景图随滚动条的移动方式
scroll默认
fixed固定
(4)background-size:;背景图片大小
x轴( )px y轴( )px
x轴100% y轴100%
cover完全覆盖
contain包含图片,覆盖不满
css边框样式
(1)border-style:;边框样式
solid实线
double双实线
dashed虚线
dotted点状线
border-width:;边框大小
border-color:;边框颜色
(2)边框也可以针对某一边单独设置
border- -style:;
left左
right右
top上
bottom下
css文字样式
(1)font-family:;字体类型
英文字体:Arial,'Times New Roman'……
中文字体:微软黑体,宋体……
(2)font-size:;字体大小
默认是16px
字体大小建议用偶数
(3)font-weight:;字体粗细
数值写法: 100-900
单词写法: 正常(normal) 加粗(bold)
(4)font-style:;字体样式
模式: 正常(normal)斜体(italid)倾斜(oblique)
italid 带有倾斜属性的字体才可以设置倾斜操作
oblique 没有倾斜属性的字体也可以设置倾斜操作
(5)color:;字体颜色
(6)text-decoration:;文本修饰
none不添加任何装饰
underline下划线
overline上划线
line-through删除线
(7)text-transform:;文本单词大小写取值
capitalize单词首字母大写
lowercase所有单词小写
uppercase所有单词大写
(8)text-indent:;首行缩进
em单位:相对单位,一个em永远跟字体大小相同
(9)text-align:;文本对齐方式
left靠左
right靠右
center中间
justify两端对齐只对多行文本有用
(10)line-height:;定义行高
默认行高:不是固定值,而是变化的。根据当前字体大小不断变化。
取值:( px)像素 (数值)比例值,跟文字大小成比例
(11)间距
letter-spacing:;定义字间距
word-spacing:;定义词间距(针对英文)
(12)折行
word-break:break-all;(非常强烈的折行)
word-wrad:break-word;(不是那么强烈的折行,会产生一些空白区域)
复合样式
一个css属性只控制一种样式,叫单一样式。
一个css属性控制多种样式,叫做复合样式。
复合的写法是通过空格的方式来实现的。
(1)background:;颜色 图片 平铺 位置……(顺序无要求)
background:red url( ) no-repeat center center;
border:;大小 颜色 样式……(顺序无要求)
border:2px black solid;
(2)font:;……大小 类型
(最少要有大小和类型这两个值顺序不能变)
(它们两个也要写到最后)
(行高可以写在大小后面记得加/)
font:bold italic 30px/40px 宋体
尽量不要单一样式和复合样式混写
如果非要混写,那么一定要先写复合样式在写单一样式
css列表属性
(1)list-style-type:;初始列表
disc实心圆
circle空心圆
square实心正方形
none不显示
(2)list-style-image:url( );图片列表
(3)设置列表项标记的放置位置
list-style-position:( );
outside 列表外面
inside 列表里面
list-style:复合属性 可以把3个属性都写在一起