CSS 教程(2)-属性1-背景,文本格式,字体

1.CSS 背景
CSS 属性定义背景效果:
background-color属性定义了元素的背景颜色
background-image属性描述了元素的背景图像.默认情况下,背景图像会在页面的水平或者垂直方向平铺,以覆盖整个元素实体.

body
{
background-image:url('gradient2.png');
}

background-repeat配合background-image使用,可以更改图片的平铺方式.可以不重复平铺,使用no-repeat,或者竖直平铺repeat-y
如果图像只在水平方向平铺 (repeat-x)

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

background-position可以利用 background-position 属性改变图像在背景中的位置

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动,scroll--背景图片随页面的其余部分滚动。这是默认;fixed--背景图像是固定的;inherit--指定background-attachment的设置应该从父元素继承

2.CSS 文本格式
文本颜色

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线

a {text-decoration:none;}//让链接无下划线

也可以这样:

h1 {text-decoration:overline;}//上划线
h2 {text-decoration:line-through;}//删除线
h3 {text-decoration:underline;}//下划线

文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母,或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}//首字母大写

文本缩进
文本缩进属性是用来指定文本的第一行的缩进。(别想着用空格缩进,那是很low的)

p {text-indent:50px;}

设置文字方向(ltr:默认。文本方向从左到右。rtl:文本方向从右到左。inherit:规定应该从父元素继承 direction 属性的值。)

div
{
direction:rtl;
}

letter-spacing 属性--属性增加或减少字符间的空白(字符间距)

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

line-height 属性,可以使用数字(100px,或者0.5--这个其实也是百分比,就是50%而已)和百分比来设置(可以设置行与行之间的距离,比如设置

p.small {line-height:70%;}//行与行之间可能会重叠
p.big {line-height:200%;}//这样行与行就隔得开

)
注意:这个可以让文字垂直居中,设置的高度和div的高度一样的话

p.big
{
    line-height: 30px
}

text-shadow 属性
基本文字阴影(text-shadow)
语法
text-shadow: h-shadow v-shadow blur color;
注意: text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。blur可选。模糊的距离;color可选。阴影的颜色

h1 {text-shadow:2px 2px 8px #FF0000;}

vertical-align 属性--设置一个元素的垂直对齐(相对于父元素的)。

<style>
    img.top {
        vertical-align: top;
    }

    img.bottom {
        vertical-align: text-bottom;
    }

    p {
        border: 1px solid red;
        line-height: 8;
    }
</style>

<p>dsfs
    <img src="./voice_rcd_btn_nor.9.png" alt="w3cschool" width="270" height="50" />asfas</p>
<p>sdfs
    <img class="top" src="./voice_rcd_btn_nor.9.png" alt="w3cschool" width="270" height="50" /> text-top 。</p>
<p>sdfs
    <img class="bottom" src="./voice_rcd_btn_nor.9.png" alt="w3cschool" width="270" height="50" /> text-bottom </p>

white-space 属性--可以让文字不换行的。或者文字保留原格式,都可以使用这个。

3.字体
CSS字体属性定义字体,加粗,大小,文字样式。

字体系列
font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。
多个字体系列是用一个逗号分隔指明:

p{font-family:"Times New Roman", Times, serif;}

字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值:
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜(和斜体非常类似,但不太支持)

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体大小

font-size 属性设置文本的大小。
能否管理文字的大小,在网页设计中是非常重要的。但是,你不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。
请务必使用正确的HTML标签,就<h1> - <h6>表示标题和<p>表示段落:
字体大小的值可以是绝对或相对的大小。
绝对大小:

  • 设置一个指定大小的文本
  • 不允许用户在所有浏览器中改变文本大小
  • 确定了输出的物理尺寸时绝对大小很有用
    相对大小:
  • 相对于周围的元素来设置大小
  • 允许用户在浏览器中改变文字大小
    如果你不指定一个字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)。

font-weight 属性--指定字体的粗细。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,464评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 2,145评论 0 2
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,204评论 0 1
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,233评论 1 4
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 7,413评论 0 17

友情链接更多精彩内容