一、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,不过这种方式，尽量不要用

前端学习——css基础知识，选择器与html模板、值得收藏的html标签的更多相关文章

  1. python之 前端HTML/CSS基础知识学习笔记

    1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </ht ...

  2. 前端学习---css基本知识

    css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. CSS学习---css基础知识0105

    CSS, Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 举例:颜色,大小,高度.宽度.内外边距.边框.浮动.定位.字 ...

  4. 前端学习---html基础知识

    HTML基本知识 学习html首先我们先看看HTML本质: web框架本质 我们在学socket,我们创建一个socketserver,然后运行起来,有一个client客户端要连接socket服务端, ...

  5. jsp学习---css基础知识学习,float,position,padding,div,margin

    1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. CSS基础知识——选择器

    选择器 元素选择器# 文档元素为最基本的选择器 例子:div{属性:值}; 选择器分组 例子:h2,p{属性:值}; 表示符合这两种规则的元素设置相同的属性值 通配选择器 表示所有元素 类选择器 应用 ...

  7. 前端学习 -- Css -- 兄弟元素选择器

    为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. < ...

  8. 前端html5/css基础知识

    https://www.cnblogs.com/clschao/articles/10073124.html

  9. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

随机推荐

  1. Java量与变量的区别

    常量:其值不变即为常量. 语法: 数据类型 常量名 = 值; double PI = 3.14; 备注: 一般默认常量名大写. 变量与常量之间关系(量间关系) 先来一个简单的实例,好了解 Java 里 ...

  2. hrbust oj 1526+2028 树状数组

    冒泡排序中 如果一个数的后面的某个数和这个数不符合排序规则 那么这个数就会在未来的某次冒泡中与那个数进行交换 这里用到了 树状数组求逆序数的办法来做 需要注意的是2028并不可以改完数组大小后直接套1 ...

  3. CodeForces 621C 数学概率期望计算

    昨天训练赛的题..比划了好久才想出来什么意思 之前想的是暴力for循环求出来然后储存数组 后来又想了想 自己萌的可以.. 思路就是求出来每个人与他的右边的人在一起能拿钱的概率(V(或)的关系)然后*2 ...

  4. DS实验题 Old_Driver UnionFindSet结构

    题目 思路 很典型的并查集问题,朋友A和B要合并到一个统一的集合中,也就是Union(A, B)操作,在Union操作中需要先找到A所属的集合的代表元和B所属集合的代表元,也就是使用Find(A)和F ...

  5. ThinkPHP 源码分析之常量 IS_AJAX

    在控制器中判断请求是否是通过 AJAX 提交,ThinkPHP(3.2.2)中在 ThinkPHP/Library/Think/App.class.php (Line:49) 中定义了常量 IS_AJ ...

  6. Static Random-Access Memory Dynamic Random-Access Memory

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION RAM technology is div ...

  7. （转）面试题--JAVA中静态块、静态变量加载顺序详解

    public class Test { //1.第一步,准备加载类 public static void main(String[] args) { new Test(); //4.第四步,new一个 ...

  8. string strSQL = "Select * From Employees;Select * from Customers";执行两次查询

    SqlCommand对象的字符串SQL命令可以做多个,以查询为例,用到SqlDataReader的一些方法,如ExecuteReader(),Read()(一条命令内的移动至下一记录),NextRes ...

  9. background和background-size

    今天偶遇一个小问题. 添加logo图片时, 由于不需要重新定位图片位置,就准备偷懒在间歇属性中省略background-position的属性,然而很不幸的是,结果却是酱紫的(谷歌浏览器): 不能加载 ...

  10. ios证书

    内容提要: 安装app时提示 “无法下载应用,此时无法安装“XXX””.我遇到过多次是由于ios的app出现证书问题.本篇文章讲解用ios证书制作过程,以及每个步骤的解释. 正文: Xcode签名至少 ...