第三篇， 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. （Nginx反向代理+NFS共享网页根目录）自动部署及可用性检测

    1.nginx反向代理安装配置 #!/usr/bin/bash if [ -e /etc/nginx/nginx.conf ] then echo 'Already installed' exit e ...

  2. pandas dataframe 过滤——apply最灵活！！！

    按照某特定string字段长度过滤: import pandas as pd df = pd.read_csv('filex.csv') df['A'] = df['A'].astype('str') ...

  3. Intel daal数据预处理

    https://software.intel.com/en-us/daal-programming-guide-datasource-featureextraction-py # file: data ...

  4. python 关闭垃圾回收

    import gc gc.disable() http://blog.csdn.net/aixiaohei/article/details/6446869

  5. Centos 7.4 源码 Nginx 安装

    一.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtool  openssl openssl-devel 二.首先要安装 PCRE ...

  6. Win10系列：VC++绘制位图图片

    在使用Direct2D绘制图片的过程中,通过IWICImagingFactory工厂接口来得到绘制图片所需要的资源.本小节将介绍如何通过IWICImagingFactory工厂接口得到这些资源,并使用 ...

  7. nginx;keepalived配置出现主主的解决方法（脑裂问题）

    1.查看日志 tail -f /var/log/messages 发现master和backup机都是mastaer模式启动的 通过查看别人的经历,发现VRRP基于报文实现的.master设置一定时间 ...

  8. nginx：负载均衡实战（二） keepalived入门

    1.keepalived介绍 顾名思义,keepalived就是保持网络在线的,用来保证集群高可用HA的服务软件.主要防止出现单点故障(坏了一个点导致整个系统架构不可用) 2.详解keepalived ...

  9. SQL-40 表中新增一列

    题目描述 存在actor表,包含如下列信息:CREATE TABLE IF NOT EXISTS actor (actor_id smallint(5) NOT NULL PRIMARY KEY,fi ...

  10. 监控中的TP50

    TP指标: TP50:指在一个时间段内(如5分钟),统计该方法每次调用所消耗的时间,并将这些时间按从小到大的顺序进行排序,取第50%的那个值作为TP50 值:配置此监控指标对应的报警阀值后,需要保证在 ...