第三篇， 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. Linux -- 之HDFS实现自动切换HA（全新HDFS）

    Linux -- 之HDFS实现自动切换HA(全新HDFS) JDK规划 1.7及以上  https://blog.csdn.net/meiLin_Ya/article/details/8065094 ...

  2. UNIX-like系统资源检查命令

    系统资源主要是内存.磁盘.CPU三项,其中任一项资源用尽都会造成系统崩溃. 系统 内存 磁盘空间 磁盘io CPU Linux free -g df -h   top AIX svmon -G/vms ...

  3. net core 模型绑定与之前版本的不同-FromBody 必须对应Json格式

    之前有一个用于七牛上传图片的Callback Url的WebAPI (之前是用.net4.0,运行正常) 代码如下: // 七牛CallBack地址,CallbackBody内容name=upload ...

  4. SqlServer2008备份与还原（完整图示版）

    一.备份 1.在需要备份的数据库上,右键——任务——备份,如下: 2.选择备份到哪个路径和备份名字: 点击“添加”,如下, 3.上面点击“确定”后,回到第一个页面,选中刚才添加的路径和文件名 4.左上 ...

  5. VSTO：使用C#开发Excel、Word【4】

    <Visual Studio Tools for Office: Using C# with Excel, Word, Outlook, and InfoPath >——By Eric C ...

  6. error MSB8008: 指定的平台工具集(V120)未安装或无效。

    打开项目属性->配置属性->右面,平台工作集,选为v10 如下图

  7. BCM5396的SPI理解

    参考文档链接:https://pan.baidu.com/s/1kuXJmULwtjOW1TeOuTRPQQ *时钟极性和相位 BCM538X / BCM5396用于根据以下标准发送/接收SPI数据: ...

  8. StringUtils方法介绍

    引用StringUtils方法全集介绍 C标准中空白字符有:空格(‘ ’).换页(‘\f’).换行(‘\n’).回车(‘\r’).水平制表符(‘\t’).垂直制表符(‘\v’)六个.

  9. android 应用程序中执行Linux 命令

    ADB 无线调试命令son = "setprop service.adb.tcp.port 5555\n" + "stop adbd\n" + "st ...

  10. EF code first Mysql 更换主键类型

    把主键从long 改为int 居然要删掉重建,不知道有没有更好的办法. 删除带外键的表: Add-Migration name 修改生成的文件,主要把dbo.删除 然后update-database