为什么要转过来呢？

　　　　因为我觉到，同样是一个初学者，应该互相学习，交流。

css：Cascading Style Sheets 层叠样式表

CSS引入方式：

1.内嵌： <p style="color:red;">xx</p>，这种方式使用最少，因为不方便阅读

2.内联：写在<head>中，<style>

　　　　　　　　　　　　　　p{xxxxx}

　　　　　　　　　　　　</style> 所有p元素都会执行{}中的代码。

3.外联：在外部创建一个CSS，再通过link连接这个css.也写在<head>中。

选择器:

1.ID选择器：命名一个 id="xx" 然后用#xx来提取。一段HTML中只能命名一个ID

2. class选择器：命名一个 class="xx" 然后用.xx来提取。可以命名多个class.

3.元素选择器：p{} span{} 元素{}

4.属性选择器：inpunt[type="text"]{}

伪类：

以一个<a>标签为例子。

a:link{xx} 没有被访问时的样式

a:visited{xx}访问后的样式

a:hover{xx}鼠标移上去的样式

a:active{xx}点击时的样式

伪元素：

:first-line{xx} 文字中的第一行的样式

:first-letter{xx}文字中的第一个字的样式

:before{xx}插入到选中的位置的最前面

:after{xx}插入到选中的位置的最后面

通配符：*，指所以元素。

后代：

ul li:nth-child(7) 指选中Ul中顺数第七个

ul li:nth-last-child(7) 指选中Ul中倒数第七个

ul li:nth-child(odd)指ul中的奇数列

ul li:nth-child(even)指ul中的偶列

ul li:nth-child(xn+y) 指xn+y的数字，n从0开始计算。

子级：

.p span{xxx}    p下的所有span的样式

.p>span{xxx}  只改变子级。孙子级的不会被改变。

并集：

h1,h2,h3,h4,{xxxx} h1-h4的样式

div1.div2.div3{xxx} div1-div3的样式，多个样式的改变。

权重：important>style>id>class>元素>*

SaberSama【css总结】的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. 2015苏州大学ACM-ICPC集训队选拔赛（1） 1001 1002 1010

    签到题 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submissio ...

  2. C#工具类之字符串扩展类

    /// <summary> /// 字典串帮忙类 /// </summary> public static class StringHelper { /// <summa ...

  3. day26 网络通讯的整个流程

    一.网络通信原理 1.  互联网的本质就是一系列的网络协议 2.  互联网协议按照功能不同分为osi七层或tcp/ip五层或tcp/ip四层 各层的功能简述: [1]物理层:主要定义物理设备标准,如网 ...

  4. nginx编译报错

    [root@vm_0_2_centos nginx-1.12.2]# ./configure --prefix=/application/nginx-1.12.2 --user=www --group ...

  5. java中检测网络是否相通

    转载:https://www.cnblogs.com/moon-jiajun/p/3454576.html 1 package com.cjj.client; 2 3 import java.io.I ...

  6. java——抽象类、接口、二者区别

    抽象类: 抽象方法:不包含方法体的方法为抽象方法,抽象方法必须使用abstract关键字来修饰: abstract void method(); 抽象类:当一个类中包含了抽象方法时,该类必须使用abs ...

  7. 用NaviCat创建存储过程批量添加测试数据

    打开navicat连接上数据库,然后打开左上角函数,新建一个函数. BEGIN DECLARE i int; --声明变量 DECLARE groupid int; set i=LAST_INSERT ...

  8. JS时间控件 moment.js用法

    参考http://momentjs.cn/ 下载 moment.js moment.min.js 12.4k moment+多语言支持.js moment+多语言支持.min.js 45.4k 安装 ...

  9. java编程--02日期格式化

    第一篇,介绍日期的比较 第二篇,介绍日期的格式化 第三篇,介绍关于日期常用的计算 第四篇,比较几个常用的日期时间相关类的区别 第五篇,jdk9对日期类进行了更新,写一些i自己的学习心得. 日期的格式化 ...

  10. GRE新东方推荐学习方法（2010年左右）

    单词:新东方新版红宝书(<NEW GRE 词汇精选>),不用<再要你命三个> 填空:新东方绿皮书(扎实的词汇量) 阅读:1 新东方绿皮书:2 <GRE阅读 39+3全攻略 ...