CSS文本与表单样式设计-优快云博客

本文链接：https://blog.youkuaiyun.com/chejinqiang/article/details/44102491

第三部分使用CSS设计文本样式

第9章字体和字体族

第二章CSS起步中向用户介绍了两种字体属性：font-size和font-family.分别使用户可以指字体大小和字体样式。除此之外：font-weight,font-variant,font-style,font-stretch,font-size-adjust.

Font-family:选择字体族。

Font-size:设置字体大小，

Font-weight:使文本加粗或变细。

Font-variant:创建小体大写字母效果。

Font-style:设置斜体。

Text-decoration:给文本加下划线。

Color:改变文本颜色。

Line-height:行高。

Font-weight属性:用于绘制字体线条的粗细，字体的重量由范围100到900的数字度量，每一级为100.数字越大，字体越粗，一般文本重量为400.加粗文本重量为700。

Font-variant属性：normal使用正常小写字母，small-caps：使用小体大写字母而不是小写字母。

Font-style:italic斜体。Normal:正常。Oblique:倾斜。

字体族：

Font-family属性用于选择字体外观的库。Font-family规则可以用如下形式出现：选择符｛font-family:字体一，字体二，字体三泛型；｝

用户可以给出任何数量的替代字体，浏览器浏览自忆的列表。并定位最近的匹配。

CSS中的五种泛型字体族：serif,sans-serif,cursive,fantasy,monospace.

第十章文本颜色和效果

有效使用颜色，使用颜色在视觉上强调各种类型内容之中的重要差异，内容应该根据信息的意义来划分，导航栏的不同于主要内容，更改标题的颜色以使他们更加突出。

明亮的颜色引起注意，平淡的颜色隐藏不重要的资料。

太多颜色使页面迷惑，并且不专业。

没有必要杜绝白色背景上的黑色元素，设计整个站点，使用一到处的页面外观。

特殊文本效果：

Text-decoration:

属性值：

Blink: 文本闪烁

Line-through: 在文本中间画一条线

Overline: 在文本顶端画一条线

Underline: 在文本底端画一条线

None: 没有在此列的效果

如：

<html>

<head>

<title>i love to decorate</title>

<style>

body{

font-family:Verdana,sans-serif;}

h1 em{text-decoration:underline;

}

.nav{border:0.3em solid black;

}

.nav a:link,.nav a:visited{

text-decoration:none;

}

.oops{

text-decoration:line-through;

}

.eg{

border:1px solid black;

margin:2em;

padding:1em;

}

#a{

text-decoration:underline;

}

#b{

text-decoration:line-through;

}

#c{

text-decoration:overline;

}

#d{

text-decoration:blink;

}

</style>

</head>

<body>

</table>

<h1>i<em> love</em> to decorate!</h1>

<p>i think that decorating

<span class="oops">cakes</span>HTML is lots of fun.here rites:</p>

<p id="a">underlined text(donnot you want to click here?)</p>

<p id="b">line-through</p>

<p id="c">overlined text</p>

<p id="d">blinking text(this is hard to show in print!)

</p>

</div>

</body>

</html>

Text-transform属性：将文本从大写改为小写。或反之

Capitalize: 每个单词的第一个字母大写。

Uppercase: 将所有的小写字母更改为大写。

None: 不更改任何事情。

Lowercase: 将所有大写字母更改为小写。

Letter-spacing属性：控制文本的间距。

Normal:字母之间不插入额外间距。大小：插入额外的大小。负的大小：减小字母之间的间距。

Word-spacing:属性：控制单词之间的空白。

White-spacing属性：当显示web页面时，浏览器压缩源代码中的所有空白，认为只有一个空格，即空白压缩。如果内容超过分配给该内容的盒子的宽度，浏览器向下移动一行并且继续文本的其余部分，称为单词绕排，。

Normal:做正常的空白压缩和单词绕排。

Nowrap: 压缩空白，但不的绕排。

Pre: 不压缩空白，按照源代码标记绕排。

Line-height:normal: 大小乘数百分比

第11章背景和背景颜色

H1{background-color:white;}

H1{background-color:#fffffff;}

H3{background-color:#fff;}

H4{background-color:rgb(255,255,255)}

H5{background-color:rgb(100%,100%,100%;)}

使用背景图像：background-image

Selecter{background-image:url(image.gif);}

Background-repeat属性：控制背景图片是不是在屏幕上平铺。

属性值：repeat:在水平和垂直平铺

Repeat-x: 只水平平铺

Repeat-y: 只垂直平铺

No-repeat: 图像只显示一次，不平铺。

Background-position属性：更改初始图像的位置，默认位于该元素盒子的左上角。

Background-attachment:用来更改图像是不是跟页面一起滚动。值为scroll.fixed.默认为scroll.

第十二章设计链接样式

:active活动链接是用户通过某种方式正在激活的链接

:hover悬停意味着鼠标指针放在特定元素上了，但是用户不一定点击按钮激活它。

在HTML中，这个状态触发对onmouseover属性设置的javascript函数。

：focus:如果可以输入某些内容到HTML中，该断定元素具有焦点，焦点表示已经被选择，但是不一定被激活的元素。

能够确定当前焦点对通过键盘访问Web非常重要，不能使用鼠标的浏览者可以使用方向键在链接内移动。当元素得到焦点时，进入:focus 状态。

A:focus{

Background-color:white;

Color:black;}

设计链接样式的常规技术

替换HTML的body属性

移除下划线

鼠标移至效果

如：

<html>

<head>

<style>

body{

background-color:black;

color:lime;

font-size:xx-large;

font-family:Verdana,sans-serif;

}

a:link,a:visited{

color:lime;

text-decoration:none;

}

a:hover{

background-color:white;

color:red;

text-decoration:underline;

}

</style>

</head>

<body>

<h1>

</h1>

</body>

</html>

第十三章列表

列表就是已经组织为所谓列表项的离散单元的一组信息，可以有序，可以无序，第三种类型的列表称为定义列表，也叫字典列表，这些列表由较短的术语和较长的解释对组成。HTML中的列表通常由合适的列表标记组成，这就意味着它们通常包括一个列表标签。

例如：<ol><ul><dl>.然后是 <li><dt>组成标记的列表项，以及通过<dd>定义的列表。也可以使用非列表标签创建列表。例如<div><a>.并且使用CSS将他们转换为列表。

在CSS上下文中，如果元素具有display属性list-item,则它是列表，当设置该值时，浏览器将元素视为<li>标签，不管实际上标签是什么。

如：

<html>

<head>

<style>

</style>

</head>

<body>

<h2>Ordered List:Tallest Moutains</h2>

<ol><li>Everest</li><li>k2</li>

<li>kangchenjunga</li>

<li>lhotse</li>

<li>makalu</li>

<li>chaulagiri</li>

</ol></td>

<h2>unordered list:Flavors of Soda</h2>

<ul><li>peach</li>

<li>Berry:

<ul><li>ranspberry</li>

<li>blackberry</li>

<li>boysenberry</li>

</ul>

</li>

<li>orange</li>

</ul></td>

</tr>

<h2>Definition list:common abbreviations</h2>

<dl>

<dd>cascading style sheets</dd>

<dd>hypertext markup language</dd>

<dd>world wide web consortium</dd>

</dl>

</td>

<h2>non-list"links</h2>

<a href="contack/">contact</a>

</div>

</td>

</tr>

</table>

</body>

</html>

通过display更改列表类型

使用CSS display属性，可以重写标签的默认显示，根据非列表元素创建列表或将列表更改为非列表。当更改display植为block,设置margin-left值以移除左边距，当设置display:list-item时，添加margin-left;

ul li{display:inline;

}

ol{

margin-left:0px;

}

ol li{

display:inline;

}

dt{

display:list-item;

margin-left:1em;

}

dd{

display:list-item;

margin-left:2em;

}

div#nav a{

text-decoration:none;

margin-lift:2em;

display:list-item;}

list-style-type:用来更改列表标记的类型，这个属性只用于具有display值list-item的元素。

属性值：circle空心圆列表符号

Decimal: 十进制数字

Disc: 实心圆列表符号

Lower-alpha: 小写字母

Lower-roman: 小写罗马数字

Square: 正方形列表

Upper-alpha: 大字字母标记

Upper-roman: 大写罗马字母

第十四章表单

表单控件和标签标记：

在HTMl中，使用<form>元素创建表单，在<form>和</form>之间，放置组成表单的HTML，它由普通的标记内容加上表单控件以及其它特别用于创建表单的其他HTML标签组成。

<button>创建reset ,submit或者其他可编程下压按键。

<fieldset>组合相关的表单控件。

<input type=”button”>创建可编程下压按钮

<input type=”checkbox”>创建复选框

<input type=“file“>从用户的计算机选择用于上传的文件

<input type=”hidden”>创建隐藏字段

<input type=”image”>使用图像创建上交按钮

<input type=”password”>创建密码文本框

<input type=”radio”>创建单行按钮中的一个按钮

<input type=”reset”>创建重置按钮

<input type=”submit”>创建提交按钮

<input type=”text”>创建单行文本字段

<label> 为表单控件提供文本标签

<legend>为fieldset提供文本标签

<option>提供select中的一个选择

<optgroup>组合相关option元素

<select> 创建下拉菜单或可滚动的菜单

<textarea> 创建多行文本输入框

<html>

<head>

<title>include a note card</title>

<style>

form{

padding:0 0.5em;

margin:0 0.5em;

border:1px solod black;

font-family:Arial,sans-serif;

}

label{border:1px dotted gray;

background-color:silver;

}

label[for]{border:none;background-color:inherit;

float:left;width:25%;

}

fieldset{margin-left:25%;

width:60%;

padding:0;}

legend{color:white;

background-color:black;

}

input[type="text"]{

font-size:x-large;

background-color:yellow;

font-variant:small-caps;

color:maroon;

width:60%;

padding-left:1em;

padding-right:1em;

font-family:monospace;

}

</style>

</head>

<body>

<h1>include a note card</h1>

check this box if your order is a gift</label></p>

<p><label for="sendername">senders name:</label>

<legend>color of paper:</legend>

<label><input type="radio" name="papercolor" checked="checked" id="papercolorwhite" value="white">white</label>

</fieldset>

<p><label for="inkcolor">ink color:</label>

<option selected value="black">black</option>

<option value="maroon">maroon</option>

<option value="green">green</option>

</select></p>

<p><label for="message">card message:

</label>

<textarea id="message" name="message" rows="4" cols="40" >type your message here.</textarea></p>

<p><label for="font">choose a font:</label>

<option selected value="Timesnewroman">,/option>

<option value="optima">optima,/option>

<option value="verdana">verdana</option>

<option value="papyrus">papyrus</option>

<option value="markerfelt">markerfelt</option>

<option value="arial">arial</option>

<option value="couriernew">courernew</option>

</select></p>

<input type="reset" id="resetbutton" name="resetbutton" value="reset form"></p?

</form>

</body>

</html>

CSS入门经典第三章