导航
导航
文章目录
  1. 一、网页文本修饰
    1. 1.1. 文字样式
    2. 1.2. 常用字体族
    3. 1.3. 段落样式
    4. 1.4. 特殊效果
    5. 1.5. 文字链接
  2. 二、图片的处理与美化
    1. 2.1. 常见图像格式
    2. 2.2. CSS背景属性
    3. 2.3. CSS图像拼合技术
  3. 三、页面中的列表
    1. 3.1. 有序无序列表
    2. 3.2. 自定义列表
    3. 3.3、列表模式导航
    4. 3.4、二级菜单导航
  4. 四、表单美化
    1. 4.1 表单元素特性
    2. 4.2 登录框制作
    3. 4.3. 搜索框制作
    4. 4.4 反馈表单制作
  5. 五、表格的世界
    1. 5.1. 正确的表格的格式
    2. 5.2. 细线表格
    3. 5.3. 隔行换色表格
    4. 5.4. 日历表制作
  6. 相关下载

《CSS那些事儿》元素篇

本文是 《CSS 那些事儿》阅读笔记 第二篇(元素篇)。篇中主要介绍网页文本修饰、图片的处理与美化、页面中的列表、表单的美化实例、以及表格正确的应用..

一、网页文本修饰

1.1. 文字样式

font:font-style || font-variant || font-weight || font-size/line-height || font-family

font-style:

1)normal、2)italic:斜体、3)oblique:倾斜的字体

font-variant:

1)normal、2)small-caps:稍小的大写字母显示

font-weight:

1)normal、2)bold:等于700、3)bolder、lighter:更粗、更细

font-size:

一般用px或em为单位,默认值medium,即根据对象字体进行调整

line-height:

1)normal、2)百分比(基于字体高度尺寸)、3)浮点数+单位(无单位则为相对高度)

1.2. 常用字体族

serif(有装饰钩):

1)Georgia、2)Times New Roman(默认)、3)Garamond

sans-serif(无装饰钩):

1)verdana、2)Helvetica、3)Arial(默认)、4)"Trebuchet MS"

Monospace(等宽字体):

1)courier(默认)、2)Monaco、3)"Andale Mono"

1.3. 段落样式

text-transform

1)capitalize:首字母大写、2)uppercase:全大写、3)lowercase :全小写

text-indent

1)百分比、2)浮点数+单位("2em"表示两个汉字)

letter-spacing/word-spacing(字符/单词间距)

1)normal、2)浮点数+单位

1.4. 特殊效果

:first-letter(首字下沉)

p:first-letter{float:left;font-weight:bold;font-size:2em} 
p{clear:both}
解析:左浮动已占据多行,加粗,设置大小,清除浮动以避免p高度受影响

overflow

  • visible(默认)
  • hidden(隐藏,配合”text-indent”可实现图片代替文字特效)
  • scrool(滚动条)
  • auto(自动滚动条)

1.5. 文字链接

  • :link(访问前样式)
  • :visited(访问后样式)
  • :hover(悬停样式)
  • active(单击未释放样式)
  • text-decoration:1)underline、2)overline、3)linethrough、4)none

二、图片的处理与美化

2.1. 常见图像格式

8位(bit)色深=256色,24位色深=1千6百万色

JPG格式

高压缩,较高质量,24位色深,有损压缩

GIF格式

高压缩,低质量,8位色深,无损压缩(超过256色变,则为有损压缩),支持1位透明度,适用于图标、单色插图、文本块。

PNG格式

支持8位和24位色彩模式,高压缩,高质量,无损压缩,载入1/64图片信息即可预览,1位或8位透明度

2.2. CSS背景属性

background:background-color || background-image || background-repeat || background-attachment || background-position}

background-attachment

  • scroll:背景图像是随对象内容滚动 (默认值)
  • fixed:背景图像固定

background-position

  • 关键词控制:top、center、bottom、left、right
  • 精确控制:
    • 先X轴后Y轴
    • 只有一个值则Y轴为50%
    • 百分比是以图像中心为基准,PX是以图片左上角为基准
    • 不受padding影响

2.3. CSS图像拼合技术

CSS Sprite 常用来合并频繁使用的图形元素。即将一些小ico合并在一张图片中,然后使用background-position来显示相应图标。注意一般定位X、Y轴要取负值。

三、页面中的列表

3.1. 有序无序列表

list-style:list-style-image || list-style-position || list-style-type

list-style-image

  • none
  • url(“”) (none或url错误,则list-style-type代替)

list-style-position

  • outside
  • inside (列表项目标记放置于文本内)

list-style-type

  • disc(实心圆)
  • circle(空心圆)
  • squar(实心方块)
  • decimal(阿拉伯数字)
  • lower-roman(小写罗马数字)
  • upper-roman(大写罗马数字)
  • lower-alpha(小写英文字母)
  • upper-alpha(大写英文字母)
  • none

ul和ol边距问题

  • IE8、Firefox对应padding-left
  • IE6、IE7对应margin-left

3.2. 自定义列表

<dl>
    <dt>一级列表标题</dt>
    <dd>二级列表内容</dd> // dt后面可以跟随多个dd
    <dd>
        <dl> //多级列表不能直接嵌套dl,必须位于dd内
            <dt>二级列表标题</dt>
            <dd>二级列表标题</dd>
        </dl>
    </dd>
</dl>

3.3、列表模式导航

<div class="site_nav"> //将所有导航标签,包含于容器内
    <h1></h1> //添加导航标题,可用CSS隐藏
    <map id="nav"> //使用map标签,必须带ID属性,有利于SEO
        - 
    </map>
</div>
#nav ul,#nav li{padding:0;margin:0;list-style:none;}
.site_nav{width:100px;} //设置容器宽度
.site_nav h1{display:none} //隐藏标题
#nav li {height:22px} //不对宽度属性调整,使用默认值“auto”
#nav li a {display :block;height:100%;text-align:center;text-decoration:none;background-color:#333:color:#fff;} //1)块状化、2)不设置宽度,使用auto、3)继承父级高度、4)文本居中,无下划线
#nav li a:hover{background-color:#e8e8e8;color:#000}

3.4、二级菜单导航

HTML省略,仅列出关键css属性

ul{width:150px;}
ul li {position:relative;}
ul li ul {display:none;position:absolute;left:149px;top:0;}
ul li a{display:block;height:100%}
ul li:hover ul{display:block;}

四、表单美化

4.1 表单元素特性

复选框、单选按钮、文件浏览选择框、下拉列表框随系统主题和浏览器不同而改变,即便添加CSS后也是如此。

4.2 登录框制作

  • method(属性),值可以是get(附在URL结尾)
  • post(已单独消息发送)
  • action(动作),即提交表单时载入的URL地址。
  • label中for属性值userName可以激活ID等于userName的表单元素
/* 经过文字时,鼠标变为手型 */
label{cursor:pointer}
 /* 解决复选框玉文字对齐不一致*/
#keepLogin{vertical-align:middle;}
<form method="post" action="">
    <div><label for="userName">用户名:</label>
    <input type="text" id="userName" /></div>
    <div><input type="checkbox" id="keepLogin" />
    <label for="keepLogin">记住我的登录信息</label></div>
    <button type="submit" class="btn_login">登录</button>
</form>

4.3. 搜索框制作

给出html结构,css省略,注意.search_box相对定位,search_tips绝对定位即可。

<div class="search_box">
    ## 站内搜索
    <form method="post" action="">
        <input type="text" value="" />
        <button type="submit">搜索</button>
        <div class="search_tips">
            ### 搜索提示

                - <a href="#">文字文字文字</a>
                - <a href="#">文字文字文字</a>

        </div>
    </form>
</div>

4.4 反馈表单制作

1)fieldset:表单域、2)legend:表单域标题、3)input(type=”file”):文件上传、4)textarea:(文本域)

<div class="feedback">
    ## 反馈表单
    <form method="post" action="">
        <fieldset class="base_info">
            <legend>用户信息</legend>
            <div><label for="userName">用户名:</label>
            <input type="text" id="userName" /></div>
        </fieldset>
        <fieldset class="feedback_content">
            <legend>反馈内容</legend>
            <div><label for="up_file">相关图片:</label>
            <input type="file" id="up_file" /><div>
            <div><label for="msg">内容:</label>
            <textarea id="msg"></textarea><div>
        </fieldset>
        <button type="submit">提交</button><button type="reset">重置</button>
    </form>
</div>

五、表格的世界

5.1. 正确的表格的格式

  • table:定义表格
  • caption:表格的标题,必须紧跟table后
  • thead:表格的表头
  • tbody:表格的主体,可多个tbody,以便分组
  • tfoot:表格的页脚
  • tr:定义表格行
  • th:表格内表头单元格
  • td:表格内单元格
  • colgroup:表格列的分组,用来对单元格宽度调整。

colgroup一般用来定义宽度,颜色无效,但可以通过相邻或子选择符的方式来定义。th颜色需单独定义。

table{width:300px;border:1px solid #000;}
caption{text-align:left;}
th{color:#f4f4f4;background-color:#999;}
td{text-align:center;background-color:#e8e8e8;}
tfoot td{text-align:right;background-color:#fff;}
colgroup{width:100px;}
tr>td{color:red;}
tr>td+td{color:green;}
<table>
    <caption>表头信息</caption>
    <colgroup span="1"></colgroup>
    <thead>
        <tr><th>表格标题</th><th>表格标题</th></tr>
    </thead>
    <tbody>
        <tr><td>表格内单元格</td><td>表格内单元格</td></tr>
        <tr><td>表格内单元格</td><td>表格内单元格</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="2">表格的页脚</td></tr>
    </tfoot>
</table>

5.2. 细线表格

应用border-collapse属性合并单元格之间的边即可。默认值separate独立不合并,值collapse为合并。

border-collapse:collapse;
th,td{border:1px solid #000;};

5.3. 隔行换色表格

1)相邻选择符法、2)为每个tr标签加class法、3)固定单元格高度,用图片代替background-color法

5.4. 日历表制作

HTML代码如下,css省略,主要colgroup下的col标签应用,以及相邻选择符的应用。

<table>
    <caption>今天是2010年9月26日</caption>
    <colgroup span="7">
        <col span="1" class="day_off" />
                <col span="5"/>
                <col span="1" class="day_off" />
    </colgroup>
</table>

相关下载

《CSS那些事儿》示例文件

支持一下
扫一扫,支持一下