1、CSS概述

CSS指层叠样式表

CSS样式表极大的提高了工作效率

1）CSS基础语法：

selector{

　　propery:value

}

例1：h1{color:red;font-size:14px;}

属性大于1个之后，属性之间用分号隔开；如果大于1个单词，需要加上引号：p{font-family:"sans serif";}

2）CSS高级语法

选择器分组：h1,h2,h3,h4,h5,h6{color:red;}

继承：body{

color:green;

}

例子：

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <link href="1.css" type="text/css" rel="stylesheet">
 </head>
 <body>
     <h1>
         这是一个h1标签的样式
     </h1>
     <h2>
         这是一个h2标签的样式
     </h2>
     <a>
         这是一个a标签的样式
     </a>
     <h3>
         这是一个h3标签的样式
     </h3>
 </body>
 </html>

其中的1.css：

 h1, a, h2{
     color:blue;font-size:50px;
 }
 body{
     color:red;
 }

2、CSS派生选择器

派生选择器：通过依据元素在其位置的上下文关系来定义样式

 <body>
     <p><strong>p标签:hello css</strong></p>
     <ul>
         <li><strong>li标签：hello css</strong></li>
     </ul>
 </body>

对应css文件：

 li strong{
     color:blue;
 }
 strong{
     color:chartreuse;
 }

3、CSS id选择器

Id选择器可以为标有id的html元素指定特有的样式，id选择器用“#”来定义

目前比较常用的方式是用id选择器来建立派生选择器

<body>
    <a>普通的a标签</a>
   <p id="pid">hello css<a href="www.jikexueyuan.com">pid中的a标签</a> </p>
</body>

对于的css文件：

 #pid{
     color:chartreuse;
 }
 #pid a{
     color:brown;
 }

4、类选择器

类选择器以一个点显示

class也可以用作派生选择器

 <body>
     <p class="pclass">class 类型</p>
     <p class="pclass"><a>这是一个class 类型中的a标签</a></p>
 </body>

对于的css文件：

 .pclass{
        color:red;
 }
 .pclass a{
     color:blue;
 }

5、属性选择器

对带有指定属性的Html元素设定样式

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
         [title]{
             color:blue;
         }
         [title=te]{
             color:rosybrown;
         }
     </style>
 </head>
 <body>
     <p title="t">属性选择器</p>
     <p title="te">属性和值选择器</p>
 </body>
 </html>

[CSS3] 学习笔记-CSS入门基本知识的更多相关文章

  1. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

  2. [CSS3] 学习笔记-CSS选择器

    CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...

  3. [CSS3] 学习笔记-CSS定位

    页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...

  4. [CSS3] 学习笔记--CSS盒子模型

    1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...

  5. [CSS3]学习笔记-CSS基本样式讲解

    1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...

  6. （3）《Head First HTML与CSS》学习笔记---CSS入门

    1.O‘Reilly的<CSS PocketReference>是一本不错的CSS参考小书,记录了常用的元素属性. 2.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(以下所有讨论 ...

  7. 前端学习笔记--CSS入门

    1.css概述: 2.css语法: 3.css添加方法: 用单独的文件存储css样式的优点: 优先级: h3得到的样式是内嵌样式覆盖了外部样式. 4.css选择器 标签选择器: 类别选择器: ID选择 ...

  8. Redis学习笔记之入门基础知识——其他特性

    1.订阅(subscribe)与发布(publish) 用户订阅某一个频道,频道发布新的信息时,会将信息告知用户 2.数据安全 1)     快照持久化(时间点转储,实质是数据副本) 操作:SAVA. ...

  9. Redis学习笔记之入门基础知识——五种数据类型

    1) 字符串 SET设置值,GET获取值,DEL删除值 INCR key-name将键存储的值加上1       DECR key-name将键存储的值减去1 INCRBY key-name amou ...

随机推荐

  1. 无源RS232转RS485（转）

    源:无源RS232转RS485 RS232  -485转换器主要包括了电源.232电平转换.485电路三部分.本电路的232电平转换电路采用了NIH232或者也可以直接使用MAX232集成电路,485 ...

  2. JS、html打开超链接的几种形式

    1.直接使用input在原有的标签页中直接打开一个页面,将原有标签页覆盖 在按钮中直接打开一个连接,这里不需要用到js的代码,根据HTML中的onclick属性 <input type=&quo ...

  3. Http协议与TCP协议理解

    TCP协议对应于传输层,而HTTP协议对应于应用层,从本质上来说,二者没有可比性.Http协议是建立在TCP协议基础之上的,当浏览器需要从服务器获取网页数据的时候,会发出一次Http请求.Http会通 ...

  4. 【转】mysql中文乱码的一点理解

    我们自己鼓捣mysql时,总免不了会遇到这个问题:插入中文字符出现乱码,虽然这是运维先给配好的环境,但是在自己机子上玩的时候咧,总得知道个一二吧,不然以后如何优雅的吹牛B. 如果你也遇到了这个问题,咱 ...

  5. MYsql数据库ERROR总结

    描述:#Warning: Using a password on the command line interface can be insecure.#ERROR 1045 (28000): Acc ...

  6. 外部SRAM实验，让STM32的外部SRAM操作跟内部SRAM一样（转）

    源:外部SRAM实验,让STM32的外部SRAM操作跟内部SRAM一样 前几天看到开源电子论坛(openedv.com)有人在问这个问题,我特意去做了这个实验,这样用外部SRAM就跟用内部SRAM一样 ...

  7. 搭建NDK环境

    2014.07.14 搭建OK,但是目前只能手动编译c代码,具体不清楚.

  8. 2）Java学习笔记：匿名内部类

    为什么要使用匿名内部类 ①如果以前的类有一些缺陷,只是想在某一个模块进行修复,可以在引用该类的地方使用匿名内部类,在overRide方法进行修复. ②如果一个类,需要派生出很多类,而且这些类大多只是在 ...

  9. gridview里item是textView、Button单击事件相应，以及按下效果的取去除

    1.响应事件的区别: gridview的item是textView的时候,gridview的itemonclick事件可以正常相应,但是换了Button后不能,原因如下: public class B ...

  10. RAMOS系统 WIN7+VHD+GURB map

    转载(并未验证) 前段时间加了一个内存条,将笔记本内存升级到了6G,由于之前用的是32位的win7不可以直接使用6G内存,便装了64位的系统.网上找资源的时候发现,大内存可以使用RamOS,从内存中虚 ...