字体样式:
    color:red;
    font-size:12px;
    font-weight:bold/normal;
    font-style:italic/normal;
    font-family:""

文本样式:
    text-indent:2em;
    text-decoration:none/line-through/underline/overline;
    text-align:left/center/right;
    line-height:200px;

其他的样式:
    width:100px;
    height:100px;
    border:1px solid/dotted/dashed red;

background-image:url(图片路径);
    background-repeat:no-repeat;
    background-position:10px 10px;
    background-color:red;

background:url(图片路径) no-repeat 10px 10px red;

===================================================

继承:
    1.只和文字相关
    2.子级继承父级的字体样式

注意:
        有默认样式的标签不继承父级的该默认样式

有color默认样式的a不继承父级的color样式

----如果非要修改a的默认样式,就在我a本身上添加修改!

===============================================
html注释:
    
    <!-- 被注释的内容 -->

css注释:
    /* 样式内容  */

--------------------------------------------
提取行间样式:
    就是把行间样式写成内联样式

行间:在标签里面写属性style

内联:在head标签里面写一个标签<style>

选择器:
    
    标签选择器 p

类选择器 class=“p1”    .p1

注意:
            1.一个标签可以有多个class
            2.所有的标签的class名可以重复

id选择器 id=“pp1”      #pp1
        ---独一无二!
        注意:
            1.一个标签只能有一个id名
            2.所有的标签的id名不能重复
            3.最好不要用id选择器来书写样式
            4.id是留给js来获取写特效的

优先级:
    id >  class  >  标签

这些选择器可以混合使用!
嵌套选择器:
.p1 span{}

<人></人>
<人 class="张三"></人>
<人></人>
<人 class="张三"></人>
<人></人>
<人 class="张三" id="142034503243409"></人>

群组选择器:
    .p1 div,p{ color:red;}

前提是div和p的样式是一样的!!!

-------------------------------------------------

伪类选择器: 写法:div:XXX
    .p1:hover{}
    #p1:hover{}
    a 全部兼容

a:link{ color:yellow;}--未访问之前    
    a:hover{ color:red;}----鼠标移入时
    a:active{ color:green;}---点击时
    a:visited{ color:#000;}---访问之后

注意:
    页面上面可以点击的文字变色用的就是a:hover

W3C规范:lv ha

a:link{ color:yellow;}--未访问之前    
a:visited{ color:#000;}---访问之后
a:hover{ color:red;}----鼠标移入时
a:active{ color:green;}---点击时

================================================

优先级:
    id >  class  >  标签
    100   10       1

嵌套选择器:
#p1{}
100

.p1 span{}
10+1=11

#box .p1 span{}
100+10+1=111

新的优先级:

行间样式    id  class 标签  默认样式

*(通配符-指代所有标签)

行间样式 > id >  class  >  标签 > *  > 默认样式  
 
===================================================

认知一下所学过的标签:

标签类型    
    块标签(元素):
    div p h
    特性:
        1.独占一行
        2.支持设置宽高
        3.不受空格影响

行内标签(元素):
    span b i em strong a    
    特性:
        1.共处一行
        2.不支持设置宽高
        3.受空格影响

包含关系:
    1.块标签可以包所有标签!
        注意:
            1.div可以包含自己
            2.p不能包含块标签

2.行内标签只能包行内元素!
        注意:
            a标签可以包含所有标签!

------------------------------

行内和块可以互换!

display:block; --可以把行内变成块!
    display:inline;---可以把块变成行内!

注意:
    通过转换以后的标签不会改变:包含关系!

===================================================

第三种类型:
    行内块!display:inline-block;
        (包含行内特性还有块特性)
        1.可以设置宽高
        2.可以共处一行
        3.受空格影响

img与身巨来就是这样的类型

在页面中只要有块元素排在一行,我不建议你用行内快!
    
    (浮动!)

==================================================

cursor:pointer;---可以把鼠标模拟手型

===========================================

新标签:
    
    组合使用!

无序列表:
<ul>
    <li></li>
</ul>

注意:
    1.ul和li都是块标签
    2.ul里面只可以放li
    3.li的最近父级只可以是ul
    4.li可以放任何标签
    5.默认每一个li前面有个小圆点(默认样式)
        ---取消默认:list-style:none;

有序列表:
    <ol>
        <li></li>
    </ol>

前端学习(三)css选择器(笔记)的更多相关文章

  1. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  2. 前端学习:CSS的学习总结(图解)

    前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位

  3. 转:CSS选择器笔记

    作者: 阮一峰 日期: 2009年3月12日 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查 ...

  4. 【转】CSS选择器笔记

    作者: 阮一峰 日期: 2009年3月12日 来源:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html 去年我学jQuery的时候,曾经 ...

  5. 前端学习(3)-CSS

    一 CSS CSS是Cascading Style Sheets的缩写,层叠样式表,用来控制网页数据的显示,可以使网页的显示与数据内容分离. 二 引入方式 (1)行内式:在标记的style属性中设置C ...

  6. jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

    今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...

  7. 前端学习之CSS

    CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...

  8. 学习《CSS选择器Level-4》不完全版

    1 概述 1.1 前言 选择器是CSS的核心组件.本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示.希望对 ...

  9. 前端学习 之 CSS(一)

    一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...

  10. 前端学习之--CSS

    CSS 常用帮助文档 CSS:被用来同时控制多重网页的样式和布局.HTML页面中CSS样式的写法有3种: 1:标签中写入 <body style='margin o auto;'> 2:h ...

随机推荐

  1. postman使用之四:设置读取变量和切换环境

    postman提供了environment管理功能,想要在多个环境中测试,比如在测试环境.灰度环境.生产环境等,只需要用同样的接口,切换下环境即可,非常方便.具体步骤: 设置环境变量  1.点击man ...

  2. Linux快速显示图片

    首先在Ubuntu里面制作图片, ######################################################################## 1920x1080为 ...

  3. Yum与RPM

    Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动下载 ...

  4. C语言数组,指针小案例

    /* ============================================================================ Name : hello.c Autho ...

  5. C#的一些代码

    form读取配置文件 /// <summary> /// 读取配置文件 /// </summary> /// <param name="key"> ...

  6. JMS Activemq实战例子demo

    上一篇已经讲了JMS的基本概念,这一篇来上手练一练,如果对JMS基本概念还不熟悉,欢迎参靠JMS基本概. 这篇文章所使用的代码已经不是我刚入手时的代码,已经经过我重构过的代码,便于理解,并且加了很多中 ...

  7. 每天一个Linux命令:rm(5)

    rm rm命令可以删除一个目录中的一个或多个文件或目录,也可以将某个目录及其下属的所有文件及其子目录均删除掉.对于链接文件,只是删除整个链接文件,而原有文件保持不变 注意:使用rm命令要格外小心.因为 ...

  8. Python基础教程(005)--为什么要学习Python?

    前言 为什么要选择Python学习 知识点 因为Python代码量少. 同样一个问题,用不同的语言,代码量差距还是很大的.一半情况下,Python是java的1比5,所以说,人生苦短,我用Python ...

  9. nginx 全面优化 负载均衡

    修改nginx.conf文件,它保存有nginx不同模块的全部设置.如果是原生安装的话应该在服务器的 /etc/nginx 目录找到 nginx.conf ,使用其它安装包的话也可以自行查找nginx ...

  10. [bzoj2456]mode 题解

    改题改自闭的时候当然要靠水题来调节心情(逃 2456: mode Time Limit: 1 Sec  Memory Limit: 1 MBSubmit: 8461  Solved: 3171[Sub ...