CSS基础属性
2017-07-14 08:14
197 查看
background-color:red
p{
background-color:red
font-size:13px
}
2.1字体相关属性
font-family:字体名称
font-size:字体大小
font-style:字形(斜体等)
font-variant：字形变化(如大写)
font-weight:字体粗细
这些可以简写，书写顺序
font-stylefont-variant font-weight font-size font-family
前面三个可缺省，使用默认值，font-size font-family必须指定值
这种书写方式更简洁
p{
font:30px楷体;
}
文本相关属性
文本相关属性主要包括颜色、对齐方式、修饰效果等
none 默认值
underline 加下划线
overline 加上划线
line-through 加删除线
text-shadow:增加阴影，比如text-shadow:-5px -10px gray;的含义是定义一个灰色的背景，其水平方向上左移5px,垂直上上移10px;
direction(n.方向；指导；趋势)
ltr:自左至右;rtl:自右至左
text-align:文本对齐方式
left：左对齐
right：右对齐
center：居中对齐
justify：两端对齐
vertical-align:文本垂直对齐方式
top 靠上对齐
bottom 靠下对齐
middle 垂直居中对齐
text-indent：文本缩进
line-height：设置行高，实际上是调整行间距
height: 750px;
background-color:aqua;
background-image:url("../image/保存按钮.png");
background-repeat:no-repeat;
background-position:right top;
}
background-color：背景颜色
也可以将这一组属性的值封装到一个属性background中，表达更加简洁。
书写顺序是：背景色background-color
背景图片 background-image
重复方式 background-repeat
位置 background-position
background: aqua
url("../image/保存按钮.png")
no-repeatright top;
尺寸相关属性
height：高度
weight：宽度
div{
width:200px;
height:200px;
background-color:red;
}
max-width：最大宽度
max-height：最大高度
min-width：最小宽度
min-height：最小高度
（1） visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；
（2） display：none，不仅隐藏内容，且让隐藏的内容不占位置
display 可以设置元素的显示模式
inline：将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容。
eg：将块级元素以内联元素来显示
<ul>
<li>服装</li>
<li>美食</li>
<li>户外旅游</li>
</ul>
<style type="text/css">
li{
display:inline-block;
width:200px;
background-color:red;
}
</style>
lnline-block：将块级元素以内联元素形式显示，同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置的大小。
eg：将内联元素以块级元素来显示
<body>
<span>HTML</span>
<span>CSS</span>
<span>AAA</span>
</body>
<style>
span{
display:
block;
}
</style>
p{
background-color:red
font-size:13px
}
2.1字体相关属性
font-family:字体名称
font-size:字体大小
font-style:字形(斜体等)
font-variant：字形变化(如大写)
font-weight:字体粗细
这些可以简写，书写顺序
font-stylefont-variant font-weight font-size font-family
前面三个可缺省，使用默认值，font-size font-family必须指定值
这种书写方式更简洁
p{
font:30px楷体;
}
文本相关属性
文本相关属性主要包括颜色、对齐方式、修饰效果等
none 默认值
eg: text-decoration: line-through;
underline 加下划线
overline 加上划线
line-through 加删除线
text-shadow:增加阴影，比如text-shadow:-5px -10px gray;的含义是定义一个灰色的背景，其水平方向上左移5px,垂直上上移10px;
direction(n.方向；指导；趋势)
ltr:自左至右;rtl:自右至左
text-align:文本对齐方式
left：左对齐
right：右对齐
center：居中对齐
justify：两端对齐
vertical-align:文本垂直对齐方式
top 靠上对齐
bottom 靠下对齐
middle 垂直居中对齐
text-indent：文本缩进
letter-spacing:字符之间的间距
word-spacing：字（单词）间距
line-height：设置行高，实际上是调整行间距
背景相关属性
body{height: 750px;
background-color:aqua;
background-image:url("../image/保存按钮.png");
background-repeat:no-repeat;
background-position:right top;
}
background-color：背景颜色
background-image：设置背景图片，需要设置图片的url地址
background-repeat:图片的复制选项
repeat：在水平和垂直两个方向上进行复制
no-repeat：不复制
repeat-x：在水平方向上复制
repeat-y：在垂直方向上复制
也可以将这一组属性的值封装到一个属性background中，表达更加简洁。
书写顺序是：背景色background-color
背景图片 background-image
重复方式 background-repeat
位置 background-position
background: aqua
url("../image/保存按钮.png")
no-repeatright top;
尺寸相关属性
height：高度
weight：宽度
div{
width:200px;
height:200px;
background-color:red;
}
max-width：最大宽度
max-height：最大高度
min-width：最小宽度
min-height：最小高度
显示相关属性
隐藏元素的方法：（1） visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；
（2） display：none，不仅隐藏内容，且让隐藏的内容不占位置
display 可以设置元素的显示模式
inline：将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容。
eg：将块级元素以内联元素来显示
<ul>
<li>服装</li>
<li>美食</li>
<li>户外旅游</li>
</ul>
<style type="text/css">
li{
display:inline-block;
width:200px;
background-color:red;
}
</style>
lnline-block：将块级元素以内联元素形式显示，同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置的大小。
eg：将内联元素以块级元素来显示
<body>
<span>HTML</span>
<span>CSS</span>
<span>AAA</span>
</body>
<style>
span{
display:
block;
}
</style>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS 属性基础
- div+css基础——1.页面全局属性设置
- Css3之基础-5 Css 背景、渐变属性
- HTML&CSS基础学习笔记2-Html的全局属性
- （一）CSS书写基础、背景、文字属性
- DivCSS布局基础：CSS中控制换行的四种属性
- CSS基础04- 优先级和display属性
- CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片
- CSS基础学习十六：CSS盒子模型补充之border-radius属性
- css基础--常用css属性02
- div+css基础——1.页面全局属性设置
- css基础系列教程:背景属性
- css基础系列教程:背景属性
- Css3之基础-3 Css 尺寸单位、尺寸属性与边框属性
- CSS基础学习七：属性选择器
- HTML基础（三）：图解CSS的padding,margin,border属性
- css简写属性和常见基础问题
- css基础系列教程4:文本属性
- ife-task2:零基础HTML及CSS编码--被忽略的属性
- Html+css基础标签属性