第三篇， 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. [CodeForces - 614C] C - Peter and Snow Blower

    C - Peter and Snow Blower Peter got a new snow blower as a New Year present. Of course, Peter decide ...

  2. MSSQL内存架构及管理

    1.  MSSQL内存架构 相比较Oracle,MSSQL的内存区域并没那么清晰,但和Oracle类似,MSSQL内存区域大体也可以分为三个部分:buffer pool,query/workspace ...

  3. python3实现的rtsp客户端脚本

    一.说明 此客户端使用python3编写 此客户端实现RTSP的OPTIONS, DESCRIBE, SETUP , PLAY, GET_PARAMETER,TEARDOWN方法,未实现ANNOUNC ...

  4. 把旧系统迁移到.Net Core 2.0 日记 (13) --图形验证码

    参考这篇文章: http://www.cnblogs.com/yuangang/p/6000460.html using System; using System.IO; using System.D ...

  5. win10装机重装系统

    win10装机     1● u启制件   http://www.laomaotao.org.cn/     http://www.laomaotao.org.cn/     2● 目标盘 3● 安装 ...

  6. 运行网站项目时，有时出现Bad Request，该怎么解决？

    有时运行网站项目时,出现Bad Request问题

  7. php对于url提交数据的获取办法

    $url = Request::getUri();//获取当前的url $arr = parse_url($url); //$arr_query = convertUrlQuery($arr['que ...

  8. 20 KMP匹配的Next值和Nextval值

     i       0    1    2    3    4    5    6    7    8 s     a    b    a    b    a    a    b    a    b n ...

  9. django+xadmin+echarts实现数据可视化

    使用xadmin后功能比较强大,在后台展示统计图表,这个需求真的有点烫手,最终实现效果如下图: xadmin后台与echarts完全融合遇到以下问题: 1.没有现成的数据model 2.获得指定时间段 ...

  10. JS-封装类或对象的最佳方案

    JS封装类或对象的最佳方案 面向对象强大的优点之一是能够创建自己专用的类或者对象,封装一组属性和行为.抛开性能来说,JS要比面向对象语言如JAVA要灵活好用的多,组装数据结构很灵活方便.那么我们如何来 ...