第三篇， CSS知识1

一，CSS 介绍

CSS： Cascading Style Sheets ---样式表

　HTML： 搭建网页结构；

　CSS： 在网页结构基础上进行网页的美化；

二，CSS的使用方法；

　　1，内联方式： 将css内容定义在单独的HTML元素中；

　　语法： <ANY  style='样式声明'>

　　样式声明：（1）每个样式声明都是由样式属性名称和样式属性值来组成的；（2）属性名称和属性值之间使用 ： 连接（属性名：值）；（3）在一个style中允许出现多个样式声明， 多个样式声明之间使用；分号来分割。 <ANY style='属性1：值； 属性2：值2；属性3：值；'>

　　常用的属性和值：

　　（1）文字大小：

　　　　属性： font-size  ;

　　　　取值： 以px为单位的数值；

　　　　eg：设置某div的文字大小为24px

　　　　 <div> style='font-size:24px;'</div>

　  （2）文本颜色

　　　　属性：color

　　　　取值：表示颜色的英文单词；　　

　　（3）背景颜色

　　　　属性： background-color

　　　　取值： 表示颜色的英文单词；

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

    <style>

        样式规则1

        样式规则2

        样式规则3

        ....

        样式规则n

    </style>

 </head>

 <body>

  <div style='font-size:24px;color:red;background-color:yellow'>天长地久

    </div>

 </body>

</html>

　　2，内部样式表；

　　　　作用： 让定义好的样式适用在多个元素中；

　　　　语法：

<head>
    <style>

　　div{
        样式规则1
        样式规则2
        样式规则3
        ....
        样式规则n

　　　　}
    </style>
 </head>

　　　　样式规则： 由 选择器 和 样式声明 组成；

　　　　　　选择器：规范了页面中哪些元素能够使用声明好的样式；

　　　　　　选择器{

　　　　　　　　样式声明1；

　　　　　　　　样式声明2；

　　　　　　　　}

　　　　　eg： div{

　　　　　　　font-size:24px;　　　　　　　

　　　　　　　　}

　　　　　　     p{

　　　　　　　　color:blue;

　　　　　　　　}

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

    <style>

        /*设置页面中所有div的样式*/

        div{

            font-size:35px;

            color:red;

            background-color:yellow;

        }

    </style>

 </head>

 <body>

  <div style='font-size:24px;color:red;background-color:yellow'>天长地久

    </div>

    <div>天长地久</div>

    <div>天长地久有时尽，此恨绵绵无绝期</div>

 </body>

</html>

　　3，外部样式表

　　　　作用：让声明好的样式能够适应在多个网页中；

　　　　（1）将样式规则声明在独立的css文件中（xxx.css）；

　　　　（2）在使用的网页上对xxx.css 文件进行引用；

　　　　<head>

　　　　　 <link  rel='' stylesheet''  href="css文件路径">

　　　　</head>

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

    <style>

        /*设置页面中所有div的样式*/

        div{

            font-size:35px;

            color:red;

            background-color:yellow;

        }

    </style>

    <!-- 引入外部样式表 -->

    <link rel="stylesheet" href="test1.css">

 </head>

 <body>

  <div style='font-size:24px;color:red;background-color:yellow'>天长地久

    </div>

    <div>天长地久</div>

    <div>天长地久有时尽，此恨绵绵无绝期</div>

    <br><br><br><br>

    <p>静夜思</p>

    <p>李白</p>

    <p>床前明月光</p>

    <p>疑是地上霜</p>

 </body>

</html>

三， CSS样式表的特征

　　1，继承性；

　　　　大部分的css属性是可以由父元素继承给子元素的

　　2，层叠性；

　　　　允许为一个元素定义多种使用方法（内联，内部样式表，外部样式表）。如果定义的属性不冲突的话，那么所有的属性都可以应用到元素上；

　　3，优先级；

　　　　如果样式属性声明冲突的话，则按照不同的优先级来应用样式；

　　　　浏览器缺省设置：  　　低

　　　　内部或外部样式表  （就近原则：后定义着优先）：　　中

　　　　内联方式　　　　： 　　高

　　调错：

　　　　1，Unknown  property name   ：　样式属性名称写错了；

　　　　2， Invalid property  value：　　样式属性值写错 了；

　　

四， CSS选择器（重难点）

　　1，选择器的作用： 规范了页面中哪些元素能够使用声明样式；

　　　　目的：为了匹配页面中的元素；

　　2，选择器详解；

　　　　（1）元素选择器

　　　　　　特点：由元素名称作为选择器，目的是为了匹配页面中指定元素名称的所有标记；

　　　　　　语法：元素名{
                 　　　　　　   ... ...
             　　　　　　　　   }

　　　　eg： div{ ... }     /*匹配页面中所有的div*/
                　　span{ ... }   /*匹配页面中所有的span元素*/
               　　 h1{ ... }　　/*匹配页面中所有的h1元素*/

　　　　（2）类选择器

　　  特点：允许被页面上任意一个元素所引用
         　　   语法：  .类名{ ... }         　　
              
         eg:      1、.redColor{color:red;}
                    2、.top{font-size:24px;}
                　　类名： 字母，数字，下划线(_),- 组成；  数字不能开头；
                　　引用类选择器：  <ANY class="类名">                   
                eg:1、<div class="redColor"></div>
            特殊用法：
                1、分类选择器的定义方式
                     特点：允许将元素选择器和类选择器结合到一起使用，目的是为了实现对某种元素不同样式的细分控制       
                     语法：     元素选择器.类选择器{
                                ... ...
                            }
                        eg:    div.redBack{ color:red; }    ；   匹配：class为redBack的div元素     
                2、多类选择器的引用方式
                    　　让一个元素引用多个类选择器，多个类选择器名称间用 空格 隔开
                    　　语法：　　<ANY class="sel1 sel2 sel3">
       　　（3） id选择器　：　　

　　　　　　id ： 在HTML中每个元素都可以声明一个独一无二的值；

　　　　　　语法：    #ID值 { }

　　　　　　eg： #main{ /*匹配ID为main的元素*/ }

　　　　（4）群组选择器

语法： 以，（逗号）隔开的选择器列表；

　　选择器1，选择器2，选择器3，....{ }

　　　　（5）后代选择器

不限制层级关系的内部元素们；（父，与，子孙）

语法： 选择器1    选择器2{ }

　　　　（6）子代选择器

只有一层层级关系的内部元素；（父，与 子）

语法：选择器1 > 选择器2 { }

#main>div.top span{}

　　　　（7）伪类选择器

匹配元素不同的状态

　　a，链接伪类：（1） ：link{ }    （2）：visited{}

　　b，动态伪类； （1） ：hover{ }  （2）：active{ }  （3） ：focus{ }匹配元素获取焦点时的样式；

选择器优先级：

　　 选择器的优先级看权值；

　　选择器　　　　权值

　　元素选择器　　   1

　　类/伪类　　　　  10

　　ID选择器　　　　100

　　内联方式　　　　1000

注：复杂的选择器， 权值进行累加计算；

五， 尺寸 与 边框

　　1，CSS单位

　　　　尺寸单位：（1）px 像素   （2）%   （3） in 英寸  lin = 2.54cm

　　　

WEBBASE篇： 第三篇， CSS知识1的更多相关文章

  1. [应用篇]第三篇 JSP 标准标签库（JSTL）总结

    有一种友谊叫做: "陪我去小卖部." "不去," "我请你" "走." 你想起了谁:胖先生?还有人陪你吗? JSP 标准 ...

  2. Sharepoint 2013 安装部署系列篇 第三篇 -- 安装和配置网络负载均衡在前端web服务器

    第一部分 系统集群安装 第二部分 SQL集群安装 第四部分 安装和配置sharepoint 场(三层拓扑部署) 接下来一步一步开始配置NLB吧, 以下开始讲解如何配置NLB集群作为sharepoint ...

  3. ASP.NET自定义控件组件开发 第一章 第三篇

    原文:ASP.NET自定义控件组件开发 第一章 第三篇 第三篇:第一章的完结篇 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待 ...

  4. ASP.NET自定义控件组件开发 第一章 第三篇 第一章的完结篇

    ASP.NET自定义控件组件开发 第一章 第三篇   第三篇:第一章的完结篇 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ...

  5. WEBBASE篇： 第五篇， CSS知识3

    CSS知识3 框模型: 一,外边距(上文) 二, 内边距    1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的 ...

  6. WEBBASE篇： 第四篇， CSS知识2

    CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素   (2)%   (3) in 英寸  lin = 2.54cm (4)pt 磅 1pt = 1/72in    ppi ...

  7. PHP 性能分析第三篇: 性能调优实战

    注意:本文是我们的 PHP 性能分析系列的第三篇,点此阅读 PHP 性能分析第一篇: XHProf & XHGui 介绍 ,或  PHP 性能分析第二篇: 深入研究 XHGui. 在本系列的 ...

  8. Spring Boot 入门之持久层篇（三）

    原文地址:Spring Boot 入门之持久层篇(三) 博客地址:http://www.extlight.com 一.前言 上一篇<Spring Boot 入门之 Web 篇(二)>介绍了 ...

  9. 【基于WPF+OneNote+Oracle的中文图片识别系统阶段总结】之篇一：WPF常用知识以及本项目设计总结

    篇一:WPF常用知识以及本项目设计总结:http://www.cnblogs.com/baiboy/p/wpf.html 篇二:基于OneNote难点突破和批量识别:http://www.cnblog ...

随机推荐

  1. F - Proud Merchants

    Recently, iSea went to an ancient country. For such a long time, it was the most wealthy and powerfu ...

  2. js如何返回两个数的商的整数和余数部分？

    js中,如何返回两个数的商的整数和余数部分? 如: num1:100 ,num2:12 var num = parseFloat(100/12); //值: 8.333333333333334 那么如 ...

  3. ssh免输入密码登录

    ssh免输入密码登录   ubuntu下生成ssh密钥参见.   https://confluence.atlassian.com/display/BITBUCKET/Use+the+SSH+prot ...

  4. LaTeX技巧10：LaTeX数学公式输入初级入门

    LaTeX最强大的功能就是显示美丽的数学公式,下面我们来看这些公式是怎么实现的. 1.数学公式的前后要加上 $ 或 \( 和 \),比如:$f(x) = 3x + 7$ 和 \(f(x) = 3x + ...

  5. jsp中的JSTL与EL表达式用法及区别

    对于JSTL和EL之间的关系,这个问题对于初学JSP的朋友来说,估计是个问题,下面来详细介绍一下JSTL和EL表达式他们之间的关系,以及JSTL和EL一些相关概念! EL相关概念 JSTL一般要配合E ...

  6. Java的File.separator

    一.File类 在Windows下的路径分隔符(\)和在Linux下的路径分隔符(/)是不一样的,当直接使用绝对路径时,跨平台会报No Such file or diretory异常. File中还有 ...

  7. Java反射《二》获取构造器

    package com.study.reflect; import java.lang.reflect.Constructor; import java.lang.reflect.Invocation ...

  8. 【资料搜集】Python学习

    python学习手册 | 演道网 http://dev.go2live.cn/python/python%e5%ad%a6%e4%b9%a0%e6%89%8b%e5%86%8c.html

  9. 【转载】OpenCV 摄像头控制

    参考:[OpenCV] -- 简单摄像头操作 - 代码人生 - 博客频道 - CSDN.NET http://blog.csdn.net/qiurisuixiang/article/details/8 ...

  10. mysql 从库执行insert失败导致同步停止

    服务配置:一主一从,版本都是 5.5 .主库配置了 binlog-do-db binlog-ignore-db 问题复述:运营人员发现,昨天的数据统计不对.数据分析服务查询的是从库的数据. 到tomc ...