CSS 回顾

原创 2016年08月28日 17:00:47
CSS 回顾
CSS 层叠样式表.
    将网页中的样式分离出来,完全由css来控制.
    增强样式的复用性以及可扩展性.
    格式:
        选择器{属性名:属性值;属性名:属性值...}

    css和html代码相结合的四种方式:
    1,每一个html标签都有一个style属性.
    2,当页面有多个标签有相同样式时,可以进行复用.
        <style>
            css代码
        </style>
    3,当有多个页面中的标签的样式相同时,还可以将样式单独封装成一个css文件.
        通过在每个页面中定义
        <style>
            @import url( "1.css");
        </style>
    4,通过html中head标签中的link标签链接一个css文件.//rel 属性指示被链接的文档是一个样式表: <head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head>
        <link rel="stylesheet" href="1.css" />

    技巧:为了提高相同的样式的复用性以及可扩展性,可以将多个标签样式进行单独定义,并封装成css文件.
        p.css,div.css
        在一个css文件中使用css的import将多个样式文件导入.
        然后在html页面上,使用link标签导入这个总的css文件即可.

        1.css
        @import url("p.css");
        @import url("div.css");

        <link rel="stylesheet" href="1.css" />
    -------------------------
    (被)选择器:其实就是样式要作用的标签容器.
    当样式后分离后,html作用在于用标签封装数据.然后将css加载到指定标签上.

    选择器的基本分类:
    1,标签选择器:其实就是html中的每一个标签名.
    2,类选择器:其实就是每一个标签中的class属性. 用.的形式表示.
        只用来给css所使用.可以对不同标签 进行相同样式设定.
    3,ID选择器:其实就是每一个标签中的ID属性.但是要保证id唯一性.用#来标识.
        ID不仅可以被css所使用,还可以被javascript所使用.

    选择器优先级.ID>CLASS>标签

    扩展选择器:
    1,关联选择器:其实就是对标签中的标签进行样式定义.选择器 选择器...
    2,组合选择器:对多个选择器进行相同样式定义.将多个选择器通过","隔开的形式
    3,伪元素选择器:其实就是元素的一种状态.
        a:link:超链接 被点前状态
        a:visited:超链接 点击后状态
        a:hover:悬停 在 超链接 上.
        a:active: 点击 超链接时.
        在定义这这些状态时,有一个顺序: L V H A
        p:first-letter//设置对象内的第一个字符的样式表属性
        p:first-line//CSS ::first-line 伪元素,匹配一个段落的第一行的样式... 猴子提示: ::first-line伪元素只可以和块类元素(div、p)连用p::first-line { background:red; color...
        :focus://CSS :focus 选择器 ,IE6不支持.但FF支持 
//所有主流浏览器都支持 :focus 选择器。 注释:如果:focus 用于 IE8 ,则必须声明 <!DOCTYPE>。定义和用法 :focus 选择器用于选取获得焦点的元素。 提示:接收键盘.
    CSS滤镜:其实通过一些代码完成丰富了样式.

    当使用到CSS的更多属性时,还需要查阅CSS API
    网页设计的时候.div+css
    div:行级区域
    span:块级区域
    p:行级区域.p中不要嵌套div.
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML5+CSS3整体回顾

来源:http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H...

回顾div+css兼容多数浏览器的一些解决方案

1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-...
  • seolove
  • seolove
  • 2012年10月22日 21:39
  • 166

Jquery 秀、无极限------正则表达式、Html、CSS、JavaScript基础回顾

---------------------- 路漫漫其修远兮,吾将上下而求索。学无止境!---------------------- 正则表达式: 是一种专门用于操作字符串的规则。 通过一些符号来表...

HTML5+CSS3整体回顾

转载请声明 原文链接 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提纲,并不是很详细,后面会一直完善补充新的内容,本文是一些笔记记录,放在这里供自己参考也供他人学习!第一课 HT...

前端开发入门:html和css基础知识回顾

前端入门:零基础:前端基本技能,web开发基础(html+css+javascript)、学习方法、学习资料;兴趣:web技术(html+css网页制作)、ps技能、前端自动化工具、前端架构、前端MV...

CSS回顾系列0之杂谈

pre-first CSS不需要编译,属于浏览器解释型语言,可以直接由浏览器执行。之前看的w3school教程入门CSS,这段时间我看了看Doye的手册,遇到不太理解的地方的话就去查阅一些资料并在c...

html/CSS基础知识回顾

html部分 块级元素: 一般用来搭建网站架构,布局,装载内容...像这些大体力的活都属于块级元素。它包括以下标签: address,blockquote,center,dir, div, dl, d...

精通Jquery,Css详解及回顾(2)

CSS:中文名,层叠样式表,用来控制HTML中元素的呈现方式。 常用的CSS属性有:Color,backGround-color,front-size,border等 刚入门是没有必要知道元素的每个属...

html与css基础知识回顾

一.关联css样式的三种方法: 二.标签属性和描述 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像...

css回顾系列1之选择器

上一篇文章写的特别混乱,现在重新把顺序捋一遍.说明一下,以后资料借鉴较多的地方来源于mdn-web-英文文档.建议大家还是看英文文档,因为中文文档翻译质量参差不齐,经常看着看着就一团浆糊了;而且最关键...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 回顾
举报原因:
原因补充:

(最多只允许输入30个字)