所在的位置: html >> html资源 >> HTMLCSS基础知识

HTMLCSS基础知识

1、CSS,即层叠样式表,用来规定网页显示效果的。

2、CSS的基本工作原理,选择器{样式声明;样式声明;样式声明;……}

3、常见的选择器:标签选择器(所有的HTML标签都可以作为标签选择器,记住标签选择器前面没有任何符号)、类选择器(对应HTML的class属性,类选择器前面是英文小数点,例如.box{width:px;})、ID选择器(对应HTML的id属性,ID选择器前面是#,例如#tips{color:red;})

4、常见的9个文本和字体属性如下:

1)color定义字体颜色属性。例如color:red;

2)font-family定义字体类型属性。例如font-family:宋体;

3)font-size定义字体大小属性。例如font-size:16px;

4)font-weight定义字体粗细属性。例如字体加粗定义为font-weight:bold;

5)font-style定义字体风格属性。例如文字倾斜定义为font-style:oblique;

6)line-height定义行间距属性,即行高。例如,line-height:24px;单行文本垂直居中,将行高设置为方框盒子的高度值。

7)text-align定义文本对齐属性。例如文本右对齐则定义为text-align:right;

8)text-indent定义文本缩进属性(段首缩进)。例如文本首行缩进text-indent:32px;

9)text-decoration定义文本修饰属性。例如

上划线text-decoration:overline;

下划线text-decoration:underline;

删除线text-decoration:line-through;

5、背景属性background,其子属性有:background-color(背景颜色)、background-image(背景图像)、background-repeat(背景重复属性)、background-position(背景定位属性)。

6、盒子模型相关属性:

1)内边距:padding

2)外边距:margin,margin:0auto;该元素相对于其父类居中显示。

3)边框:border(子属性有:border-color边框颜色、border-width边框宽度、border-style边框样式)

4)元素内容尺寸:width元素内容宽度属性、height元素内容高度属性。

注意:padding、margin和border属性有方向。

7、盒子的浮动相关属性:

1)float属性:定义盒子向左或右浮动。

2)overflow属性:定义盒子溢出时的显示效果。当一个方框盒子没有定义高度时,需要使用overflow:hidden;

3)display属性:规定HTML元素是显示为块级元素还是行内元素。块级元素默认的显示为block,行内元素默认显示为inline。将行内元素转化为块级元素可以使用“display:block;”,将块级元素转化为行内元素可以使用“display:inline;”。

8、常见的块级元素:body、h#、p、ul/li,ol/li,dl/dt/dd,hr等;

常见的行内元素:img、a、span、em、strong

9、可用于网页排版的CSS属性:float、position(相对定位于绝对定位数学),margin:0auto;其中float与position属性会改变HTML文档的文档流属性,而margin:0auto;不会改变HTML文档的文档流属性。

10、文档流:标准文档流与非标准文档流,标准文档流是指HTML元素自然排列(即没有使用float与position属性。)

11、绝对多数的块级元素都有默认的内外边距(padding,margin)。div标签没有默认的内外边距。

12、CSS样式表的优先级:行内式内嵌式外部式样式表。

13、CSS选择器的优先级:

以下是一个按特性分类的选择符的列表:

h2{color:blue;}特性值为:1

pem{color:purple;}特性值为:2

.apple{color:red;}特性值为:10

p.bright{color:yellow;}特性值为:11

p.brightem.dark{color:brown;}特性值为:22

#id{color:yellow}特性值为:

从上表我们可以看出#id具有更高的特殊性,因而它有更高的权重。当有多个规则都能应用于同一个元素时,权重越高的样式将被优先采用。

14、padding(内边距),margin(外边距),height(高度),background(背景)、display属性、overflow属性等都是不继承的。

15、*{padding:0;margin:0;list-style-type:none;}其中“*”代表通配符,这种全局声明,也叫做通用选择器。

16、CSS锚伪类:

a:link{color:red;}

a:visited{color:blue;}

a:hover{color:yellow;}

a:active{color:purple;}

a:hover必须放在a:link{}和a:visited{}之后,

a:active必须放在a:hover的后面。

17、合理的设置TDK标签(网页三标签)有助于SEO,TDK指的是网页标题标签title、网页描述标签description以及网页关键词标签keywords。

18、有助于网站优化的HTML文档结构必须要有meta标签定义的description与keywords:

html

head

metacharset=utf-8

titleHTML基础/title

metaname=descriptioncontent=网页正文摘要(说明)

metaname=keywordscontent=网页关键词(关键字)

linkhref=yangshi.cssrel=stylesheettype=text/css

/head

body

网页内容

/body

/html

19、网页的字符集charset包括:utf-8(国际通用字符集)、gbk(gb、gb等简体中文字符集)、big5(繁体中文字符集)。

20、图片img/标签必须要书写alt属性,以便于搜索引擎更好的识别图片内容。

21、h#标签默认效果为强调:加粗、默认字号、换行效果,合理的使用H标签(特别是H1、H2和H3),有利于搜索引擎快速的了解网页的主题内容。其中H1标签在一个网页只能够使用1次,一般在文章标题处使用。

22、选择图片素材的时候,在不影响图片清晰度前提下,图片所占用的空间要最小。

23、所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。

24、超链接是搜索引擎蜘蛛不断地抓取网页的桥梁。

25、URL:统一资源定位符,是UniformResourceLocator的缩写,也被称为网页地址,是Internet上标准的资源地址。Internet上的每一个网页对应一个唯一的URL地址。

任何一个URL,它只会指向一个网页。

以新浪体育网和腾讯体育网的NBA频道为例:

/nba/:相对地址




转载请注明:http://www.aierlanlan.com/rzgz/2993.html