文字、背景、超链接、列表和表格

文字样式

一、基本单位

px 像素
em 字符（自动适应用户所使用的字体）
% 百分比（不同情况下相对值不同）

二、颜色

red，blue，green：三基色
rgb(x,x,x)：RGB值，每个颜色分量取值0~255,
红色：rgb(255,0,0)；灰色：rgb(66,66,66)
rgb(x%,x%,x%)：RGB百分比值，效果如上，只是度量不同
蓝色：rgb(0,100%,0)
rgba(x,x,x,x)：RGB值，透明度
a值：0.0（完全透明）；1.0（完全不透明）
#rrggbb：十六进制数
红色：#ff0000（红色：#f00,去掉重复位）

三、文本

color：文本颜色
red,#f00,rgb(255,0,0)
letter-spacing：字符间距
2px,-3px（负值说明字符重叠）
line-height：行高
14px,1.5em,120%
text-align：对齐
center,left,right,justify(两端对齐)
text-decoration：装饰线
none,overline,underline,line-through
超链接默认下面有下划线，所以将text-decoration设为none就可以去掉。
text-indent：首行缩进
2em（缩进两字符）

四、字体 font

font：在一个声明中设置所有字体属性
font: bold 18px ‘幼圆’
font-family：字体系列
font: “Hiragion Sans GB”, “Microsoft YaHei”;
font-size：字号
14px,120%
font-style：斜体
italic
font-weight：粗体
bold
CSS文字——简化font
font: 斜体粗体字号/行高字体
font: italic bold 16px/1.5em '宋体' ;

背景与超链接样式

一、背景

background-color：背景颜色
background-image：背景图片
url(图片的路径)
注：背景颜色和图片都设置的情况下，图片会覆盖颜色。当背景图片无法正常显示时，才显示背景颜色。
background-repeat：背景图片的填充方式
repeat（棋盘填充）
repeat-x（横向填充）
repeat-y（纵向填充）
no-repeat（只填充一次）
background混合
background：颜色图片 repeat

二、超链接

链接的四种状态

a:link：普通的、未被访问的连接
a:visited：用户已访问的连接
a:hover：鼠标指针位于连接的上方悬停
a:active：连接被点击的时刻

代码：
CSS

a:link{text-decoration: none;color: blue;/*未访问*/
}
a:visited{text-decoration: none;color: orangered;/*访问过的*/
}
a:hover{text-decoration: underline;color: chartreuse;font-weight: bold;/*鼠标悬停*/
}
a:active{text-decoration: none;color: gold;/*按下鼠标*/
}

HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="CSS/a.css"/><title></title></head><body><a href="https://www.sohu.com/">搜狐</a><br><a href="https://www.jd.com/">京东</a><br><a href="https://www.163.com/">网易</a><br></body>
</html>

效果：

访问前
鼠标悬停
鼠标点击
访问后

列表和表格

一、列表

无序列表ul，有序列表ol
共用样式
list-style：所有用于列表的属性，设置于一个声明中
list-style-image：为列表项标志设置图像
url(图片对路径)
代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#othernews {font-size:14px;line-height:1.5em;list-style-image:url(image/bullet1.gif);/*列表项设置图像*/}a:link{text-decoration: none;}</style></head><body>相关阅读:<ul id="othernews"><li><a href="#" >迪拜华商财富缩水 瞻望前景信心犹豫</a></li><li><a href="#" >全球华商总资产恢复增至3.9万亿美元</a></li><li><a href="#" >华商基金胡宇权：行业不平衡将带来投资机会</a></li></ul></body>
</html>

效果：

list-style-position：标志的位置
代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.inside{list-style-position: inside;}.outside{list-style-position: outside;}</style></head><body><ul class="inside"><li>HTML——网页结构</li><li>CSS——网页样式</li><li>JS——网页交互</li></ul><ul class="outside"><li>HTML——网页结构</li><li>CSS——网页样式</li><li>JS——网页交互</li></ul></body>
</html>

效果：

list-style-type：标志的类型
属性值：

无序列表
有序列表

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.roman{list-style-type: upper-roman;}</style></head><body><ol class="roman"><li>HTML——网页结构</li><li>CSS——网页样式</li><li>JS——网页交互</li></ol></body>
</html>

效果：

二、表格

表格大小
属性：宽、高：width,height

table{width: 500px;height: 200px;
}

表格边框

border属性

table,td,th{border: 1px solid #eee;
}/*一个像素宽，实线显示，灰色*/

border-collapse属性
合并表格边框和单元边框

table{border-collapse: collapse;
}

案例：
代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.mystyle{width: 150px;height: 100px;border-color: black;border-collapse: collapse;background-color: antiquewhite;}</style></head><body><table class="mystyle"><tr><th>Header1</th><th>Header2</th></tr><tr><td>Data1</td><td>Data2</td></tr></table></body>
</html>

效果：

奇偶选择器 :nth-child(odd/even)
odd：奇数；even：偶数
案例:
代码：

<style>
table
{font-family:"微软雅黑", "宋体";width:500px;border-collapse:collapse;
}
td
{font-size:1em;text-align:left;border:1px solid #98bf21;
}
/*表格第一行表头单元格样式*/
th {font-size:1.1em;text-align:left;background-color:#A7C942; color:#ffffff;border:1px solid #98bf21;
}
/*表示：
tr的父元素table的奇数个子元素，不管这些子元素是tr还是th
所以第一个child从第一行th这个子元素开始计数
*/
tr:nth-child(odd)
{color:#000000;background-color:#EAF2D3;
}
</style>

<table><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr><tr><td>Berglunds snabbköp</td><td>Christina Berglund</td><td>Sweden</td></tr><tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr><tr><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr><tr><td>Island Trading</td><td>Helen Bennett</td><td>UK</td></tr><tr><td>Königlich Essen</td><td>Philip Cramer</td><td>Germany</td></tr><tr><td>Laughing Bacchus Winecellars</td><td>Yoshi Tannamuri</td><td>Canada</td></tr><tr><td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Italy</td></tr><tr><td>North/South</td><td>Simon Crowther</td><td>UK</td></tr><tr><td>Paris spécialités</td><td>Marie Bertrand</td><td>France</td></tr>
</table>

效果：

前端学习之CSS（03）常用样式相关推荐

Web前端——用CSS的常用样式制作一个炫酷的按钮
文章目录笔记:CSS的常用样式炫酷按钮效果实现笔记:CSS的常用样式边框以及弧度样式 border-width:边框的线条宽度. border-style:边框的样式,例如 solid实现 d ...
CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
(:◎)≡前端学习之CsS篇
前端学习之CSS篇 1.CSS简介 2.CSS语法规范 3.CSS选择器 (1)标签选择器 (2)类选择器 (3)id选择器 (4)通配符选择器 (5)选择器总结 4.CSS字体属性 5.CSS文本属 ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
amazeui学习笔记--css（常用组件4）--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
amazeui学习笔记--css（常用组件1）--小徽章Badge
amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...
amazeui学习笔记--css（常用组件5）--评论列表Comment
amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...
amazeui学习笔记--css（常用组件6）--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
前端学习之CSS第三天
前端学习之CSS第三天一.圆角边框 border-radius 圆形 :正方形的盒子是圆形,长方形的盒子是椭圆 boder-radius:50% 圆角矩形:高度或者是宽度的一半 border-rad ...

前端学习之CSS（03）常用样式

文字、背景、超链接、列表和表格

文字样式

一、基本单位

二、颜色

三、文本

四、字体 font

背景与超链接样式

一、背景

二、超链接

列表和表格

一、列表

二、表格

前端学习之CSS（03）常用样式相关推荐

最新文章

热门文章