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;}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,128评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,316评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,737评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,283评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,384评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,458评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,467评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,251评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,688评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,818评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,492评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2 352

推荐阅读更多精彩内容

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