CSS样式一之基本属性
程序员文章站
2022-06-09 10:27:28
...
预览
外观样式
调试工具
显示模式
行高居中问题
背景样式
外观样式
a. color 属性
color: red #FF0000 rgb(255,0,0)
<style>
span{
color:#FF0000;
}
</style>
<span>评论中大奖</span>
b. line-height
行高属性,通常比文本大7 8 像素即可。
<style>
p{
font-size:20px;
line-height:28px;
}
</style>
c. text-align
文本水平方向 居左 居右 居中
d. text-indent 首行缩进
<style>
p{
text-indent:2em; //sh
}
</style>
e. text-decoration
none/blink/underline/line-through/overline
<em>倾斜</em> <i></i>
<strong>加粗</strong> <b></b>
<u>下划线</u> <ins> </ins>
<s>删除线</s> <del> </del>
调式工具
显示模式
块级元素
常见的标签 h p ul ol div li
独占一行,有宽高
行内元素
行内块元素
img table input
模式转换
display : block/ inline /inline-block
注意点
a. 当布局为行内元素或者行内块元素时,他们可以像文字一样水平居中
b. 当行高等于布局高度,则其内部单行文本垂直居中。
c. h 和 p 是文本类块级元素。因此其内部不能放块级元素。
d. a中不能签到a标签,但是可以放块级别的元素。
e. 注意 标签层级嵌套不超过3层
通过行高是文字(行内元素垂直居中)
顶线 中线 基线 底线
行高是两个基线之间的距离
背景样式
body{
background-color:pink;
background-image:url('images/hh.jpg');
background-repeat: repeat no-repeat repeat-x repeat-y
background-position:x y 方位名词(如果方位名词只有一个,那么另一个居中);数值
background-attachment: scroll | fixed
//background: #ff0000 url() no-repeat fixed center 0
}
背景半透明
background-color: rgba(0,0,0,0.8)