前端学习——css基础知识,选择器与html模板、值得收藏的html标签

时间:2021-10-03 11:29:41

一、css需要的html(采用html5标准)

DTD,文档类型声明:

<!Doctype html>

文本编码声明:

<meta charset="utf-8">,或者<meta http-equiv="content-type" content="text/html;charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame

当在手机上打开网页时,如果不希望屏幕缩小,以免文字变得太小,难以阅读,可以添加:

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1 user-scalable="no"">
<meta name="apple-mobile-web-app-capable" content="yes">
这个用于移动web开发中,meta的作用是让普通移动网页被添加到主屏幕后,拥有一些类native的功能,很多同学应该都很熟悉了。就是类似隐藏ios的上下状态栏,实现全屏,禁止弹性拖拽,全屏,修改顶部颜色等。

下面给出一个完整的html模板:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width">
</head>
<body> </body>
</html>

一些值得收藏的html标签:

1.不要使用<b><i>来使文字变成粗体或者斜体,如果标识语义上的强调,可以使用strong或者em.

2.对于包含多个相关项目的列表,请使用ul,比如导航链接,标题,或者诸如此类的一组提示语等。

3.如果要创建一个术语表及其定义或描述,使用<dl>,并结合<dt>(定义术语)和<dd>(定义术语);

4.如果包含一段引用语,使用<blockquote>标签,对那些简短的引语则使用<q>标签;

5.利用一些生僻的标签如<cite>来引用书的标题,新闻报道或者网站,利用<adress>来标题和提供作者的联系信息或者版权声明。

6.要记得关闭标签,除了一些自关闭的标签,如<br>和<img>等

二、样式表的引入(采用html5标准)

为了保证良好的代码风格,采用外部样式表

<link rel="stylesheet" href="css文件路径"/>

之前的html标准,还需要加上:

<link rel="stylesheet" type="text/css" href="css文件路径"/>

此外,还有@的方式引入css文件,但是有时候会出现一些问题,因此,最好采用link标签。

如果想要避免告诉缓存的影响,使得浏览器始终加载最新的样式文件,可以在link标签的css文件后面添加查询字符串

<link rel="stylesheet" href="main.css?v=1">

每次修改样式表的时候都修改一下v=后面的那个数字,浏览器就会将它看成是新的文件,而从服务器重新下载,而不是使用缓存中的文件。

针对特殊的ie版本引入css文件,可以添加条件注释:

<!--[if IE]>
<![endif]--> 针对不同的ie版本:
<!--[if IE 7]>
<![endif]--> <!--[if lte IE 8]>
<![endif]-->

三、css选择器

和jquery的选择器类似,css3公布了一些新型的选择器,伪类和伪元素:

伪类:

和链接a有关的四个伪类:a:link,a:visited,a:hover,a:active

伪元素:(css3中伪元素使用::,不过依旧支持Css2中的单冒号:)

::first-letter 首字母

::first-line 首行

:before,:after 这两个伪元素可以创造内容,新创建的内容作为原来元素的子元素;

::selection 针对网页上选中的项目(只有双冒号的用法)。

和子元素相关的伪选择器有:

>  body>h2 选择body中的h2子标签,而非body h2那般选择所有后代h2子标签;

:first-child  p:first-child选择作为第一个子元素的p标签(而非p的第一个子元素)

:last-child  p:last-child选择作为最后一个子元素的p标签(而非p的最后一个子元素)

tr:nth-child(odd)每奇数行,tr:nth-child(even)每偶数行,tr:nth-child(3n+2) 3代表每三个元素,2代表从第二个元素开始

:first-of-type 与:first-child类似,但作用于具有特殊标签的第一个元素。.sidebar p:first-of-type 选择sidebar中第一个p标签(不论该p是不是第一个子标签)

:last-of-type 与上类似

:nth-of-type  与上类似

h2+p 选择与h2相邻的p元素

h2~p 选择与h2同胞标签的所有p元素

:not() 反向选择

[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。

四、css样式继承

一般来说,影响元素位置的属性,或者边距,背景颜色,元素边框border等不能被继承。

五、css样式层叠管理(决定何种样式胜出,就叫做层叠)

1,最近的,最具体的样式胜出

2,多种样式叠加,简单利用1不能判定的时候,可以利用权重计算:

1)一个ID选择器,权重为100

2)一个类选择器,权重为10

3)一个标签选择器,权重为1

由此可见,很多web设计师使用类选择器而非ID选择器的原因就在于,ID选择器的权重大,如果在父类元素中利用ID选择器设置了样式,那么子类元素往往需要更大权重才能覆盖,这样就会导致出现一些冗长、复杂的样式表。

具体操作中,可以利用chrome或其他浏览器附带的审查元素功能,来观察具体何种样式胜出,被“——”删除的就是被覆盖的样式

3,要想保证某种样式一定不被覆盖,可以使用!important,不过这种方式,尽量不要用