第三篇， 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. 五笔xu

      1● 横 a s d f g     半包围 上下 左右   2● 竖 h j k l m 左右 上下 半包围     3● 撇 q w e r t     半包围 上下 左右 4● 捺 y u ...

  2. radio选择

    input标签radio单选 <tr> <th style="font-weight: bolder;text-align: right;width:18%" & ...

  3. windbg 定位崩溃问题

    三板斧如下: 使用windbg打开dump文件,设置好对应进程的 pdb 文件(这个很关键.为了避免releas优化导致符号文件错乱,我发布的所有                      relea ...

  4. decltype的参数是左值时，得到一个引用类型

    int* a = new int(10); decltype(*a) 得到的是引用类型:int&

  5. 通过滑动条控制Cube旋转

    private float speed = 10; private float speedValue; private GameObject slider; private GameObject cu ...

  6. [转载]springmvc学习之@ModelAttribute运用详解

    spring学习之@ModelAttribute运用详解 链接

  7. python全栈开发笔记---------变量小结

    变量是什么? 变:变化,重在变字,量:计量,衡量,表示一种状态. 变量字面理解就是一个可能改变的量,也就是这个值是不固定的. 变量名: a.数字 b.字母 c.下划线 变量的定义 level = 1 ...

  8. MySQL/MariaDB 版本选择

    ALPHA.BETA.Release Candidate(RC).Release.GA等版本号的意义 MySQL数据库会存在很多版本,在这么多的版本中,我们如何进行选择,那么,首先我们要了解各个版本号 ...

  9. Java并发编程_wait/notify和CountDownLatch的比较（三）

     1.wait/notify方法 package sync; import java.util.ArrayList; import java.util.List; public class WaitA ...

  10. node连接myslq

    var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'localhost', user : ' ...