CSS样式要点笔记

一、背景色

background-color:#ccc;

background不能继承,其默认值是transparent(透明的),即在某元素未设置background-color时其默认为透明背景,即这时候如其父元素背景设置了则可见。

二、文本

1、文本缩进:

p {
    text-indent: 2em;
}

一般对于块级元素都可以应用text-indent,而行内元素无法应用。缩进的单位一般通过em表示元素内容的单位。该属性可以继承。

2、水平对齐:

p{text-align:center;}

这里需要注意的是text-align顾名思义仅是让元素内部的文本/内容(text)对齐,而非让该元素本身。

3、字间隔:

p {word-spacing: 2em;}

4、文本装饰:

p {
    text-decoration:underline;
}

该属性值包括:none无装饰、underline下划线、overline上划线、line-through删除线、blink闪烁字。

三、字体

p {
    font-family:sans-serif;
    font-style:italic;
    font-weight:bold;
    font-size:18px;
}

四、链接

a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

“lvha”分别对应未被点击访问、已被点击访问、鼠标指针移动到链接上、正在被点击四种状态。设置的时候必须注意按照"lvha"的顺序。

五、列表

1、修改列表项目的标志类型:

ul { list-style-type: square;}

2、使用图像作为列表项目标志:

ul li {list-style-image: url(x.jpg);}

六、表格

table, th ,td {
    border:1px solid blue;
}
th {
    background-color:green;
}
th, td{
    text-align:center;
    vertical-align:middle;
}
时间: 2024-11-10 07:35:21

CSS样式要点笔记的相关文章

CSS高级要点笔记

CSS高级 *对齐块元素 对于块元素内部内容的水平对齐可以使用text-align:center: 而对于块元素本身在布局中的对齐可以使用margin属性,可以通过将左右外边距设置为auto来水平对齐. <!DOCTYPE html> <html> <head> <style> .center { margin:auto; width:70%; background-color:#b0e0e6; } </style> </head>

CSS自学笔记(3):CSS样式表的使用

当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页. 想要浏览器读到样式表,有三种方法: 1.外部样式表 外部样式表可以理解为.CSS文件.当多个页面使用同一个样式的时候,外部样式表是一个很理想的选择. 在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,无需在调整html文件,尤其是多个页面使用同一个样式的时候. 每个html页面使用标签<link>来连接外部样式表: <head> <link rel="

CSS3学习笔记-1:CSS样式继承

自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质.继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可.这项特性可以给网页设计者提供更理想的发挥空间.但同时继承也有很多规则,应用的时候容易让人迷惑 CSS的一个主要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个

根据兄弟元素的数量来设置样式(CSS揭秘学习笔记)

CSS揭秘学习笔记 li.length == 4 li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { /* 当列表正好包含四项时,命中所有列表项 */ } li.length >= 4 li:first-child:nth-last-child(n+4), li:first-child:nth-last-child(n+4) ~ li { /* 当列表至少包含四项时,命中所有列表项 */ } li.l

HTML&amp;CSS基础学习笔记1.28-给网页添加一个css样式

CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 我们可以这么说,CSS是网页的衣服,它可以用来装饰网页. 那么接下来我们就来试试css吧~ 给网页添加一个CSS样式 尝试给<p>标签直接加了一个[style]属性,并且给标签添加了一个字体颜色.这种在标签上直接添加样式的形式,我们称这种关联方

HTML&amp;CSS基础学习笔记1.29-灵活地使用样式

灵活的使用样式 使用样式的感觉很棒吧! 刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦. 而如果我们使用内部样式表,我们只需要定义<p>标签的文字大小,所有<p>标签就都具有这个样式了. 看个例子吧: 更加实用的使用方式 使用内部样式表,我们能够把页面上的共通样式提取出来.可以省去很多工作量.但是内部样式表并不是最好的方法,比如说,另一个页面也需要这些样式呢? 相对而言,我们更愿意使用外链样式表,

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

CSS学习要点

目标 掌握CSS基本语法,了解如何应用CSS到Html元素上并能熟练使用CSS进行元素布局. 要点 CSS基本概念.存在的意义 CSS 指层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素:CSS出现解决了内容与表现分离的问题,极大提高工作效率. 定义样式信息的多种方式以及优先级 浏览器缺省设置 外部样式表(样式信息存放在外部某个文件中) 内部样式表(定义在head标签内部的样式信息) 内联样式(直接在HTML元素中使用style来设置样式信息) 它们的优先

css样式(火狐的兼容性问题)

1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 wid