一、属性:通过属性的复杂叠加才能做出漂亮的网页

二、选择器:通过选择器找到对应的标签设置样式,选择器的作用是:选择对应的标签,为之添加样式

1》标签选择器:根据标签签名找到标签

div{
    color: red;

}

2》类选择器:

.one{
    color: yellow;

}

3》id选择器:

#main{
    font-size: 40px;

}

4》并列选择器:

div,.one{
    color: yellow;

}

5》复合选择器:

div.one{
    color: blue;

}

6》后代选择器:

div p {
    color: green;

}

7》直接后代选择器:

div>p {
    color: green;

}

8》相邻兄弟选择器:

div+p {
    color: red;

}

9》属性选择器:

div[name]{
    color: red;

}

div[name=“jack”]{
    color: red;

}

10》伪类:

:active  向被激活的元素添加样式

:focus  向拥有键盘输入焦点的元素添加样式

:hover  当鼠标悬浮在元素上方时,向元素添加样式

:link  向未被访问的链接添加样式

:visited 向已被访问的链接添加样式

:first-child 向元素的第一个子元素添加样式

:lang 向带有指定lang属性的元素添加样式

11》伪元素:

:first-letter 向文本的第一个字母添加特殊样式

:first-line 向文本的首行添加特殊样式

:before 在元素之前添加内容

:after 在元素之后添加内容

CSS的两大重点的更多相关文章

  1. css 两大特性:继承性和层叠性

    css 有两大特性: 继承性和层叠性, 继承性 面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属 ...

  2. HTML+css基础 css的几种形式 css选择器的两大特性

    3.外联样式 css选择器的两大特性 1.继承性:所有跟文本字体有关的属性都会被子元素继承.且权重是0000. 2.层叠性:就是解决选择器权重大小的一种能力,就是看那个选择器的权重大.谁的权重大听谁的 ...

  3. CSS的选择器分为两大类

    CSS的选择器分为两大类:基本选择题和扩展选择器. 基本选择器: 标签选择器:针对一类标签 ID选择器:针对某一个特定的标签使用 类选择器:针对你想要的所有标签使用 通用选择器(通配符):针对所有的标 ...

  4. 第213天:12个HTML和CSS必须知道的重点难点问题

    12个HTML和CSS必须知道的重点难点问题 这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?这个还是容易被忽视 ...

  5. 12个HTML和CSS必须知道的重点难点问题

    这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?这个还是容易被忽视的,浮动也是一个大坑,有很多细节.这12个知识 ...

  6. 10个HTML和CSS必须知道的重点难点问题

    前端日刊 登录 10个HTML和CSS必须知道的重点难点问题 2018-02-26 阅读 2982 收藏 6 原链:segmentfault.com 分享到:   前端必备图书<深入浅出Node ...

  7. webpack 教程 那些事儿03-webpack两大精华插件,热加载

    本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...

  8. JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

    整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...

  9. [转帖] 中国SaaS死或生之二: ERP两大邪术,尽出歪门邪路 ---- 挺好玩的

    中国SaaS死或生之二: ERP两大邪术,尽出歪门邪路   http://www.cniteyes.com/archives/33753   文章摘要:在数字化浪潮中,油腻ERP大叔的那些“歪门邪术” ...

随机推荐

  1. 一个github账户多台电脑代码提交

    在实际工作生活中,我们可能不一定仅仅在一台电脑上编码,比如:我们平时在单位电脑1上写代码,提交代码到github账户,而我们也可能会在在家里的电脑2上继续工作,提交代码,这样就是在不同的电脑上提交代码 ...

  2. jquery的全选插件

    全选看起来挺简单的,要做得完美就不那么容易了. 目前,我的全选插件能做到以下6点: 1.点击全选checkbox,能将要选择的checkbox都选中.去掉全选按钮,能将所有的checkbox都不选.这 ...

  3. 分配和释放 BSTR 的内存

    本文档已存档,并且将不进行维护. 分配和释放 BSTR 的内存 Visual Studio .NET 2003                  转自: https://msdn.microsoft. ...

  4. 获取JAVA[WEB]项目相关路径的几种方法

    在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录是WebRoot/WEB-INF/classes 当然你也可以用System.getPro ...

  5. 使用canvas编写环形图.

    原理使用canvas画图: 第一步:画一个大圆 第二部:画一个扇形 第三部:画一个小圆 相互叠加. 最终效果: 现在上代码: (function($){ $.fn.drawPic=function(o ...

  6. 【转载】nodejs,npm,express分别什么?

    很多刚刚接触nodejs的初学者,都会经历一个很繁冗的环境安装过程. 一般主要要安装nodejs,npm和express三样东西.那么这三样东西分别是干什么的呢? 本篇文章就大致介绍一下这三样东西分别 ...

  7. C++设计模式-Facade模式

    Facade模式 作用:为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 动机 将一个系统划分成为若干个子系统有利于降低系统的复杂性.一 ...

  8. java socket 通讯

    (转)http://blog.csdn.net/xn4545945/article/details/8098646

  9. 说说Timing这回事(转载)

    本文原始位置:FPGANotes Blog http://wiki.fpganotes.com/doku.php/ise:timing:my_summary Intro 问:一个FPGA设计项目需要用 ...

  10. [转载] COM 套间

    http://www.vckbase.com/index.php/wv/1315 简序 大学毕业前的最后一学期,在一家公司实习,当时的工作需要用到一些操作系统提供的组件.那时候只知道COM这个名词,并 ...