第三篇, 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 - 197E] E - Paint Tree

    E - Paint Tree You are given a tree with n vertexes and n points on a plane, no three points lie on ...

  2. git设置远程同步分支

    git push --set-upstream origin yourBranchName

  3. 二十三、Spring框架的相关知识点总结

    1.Spring的优点: 1.1.Spring在大小和透明性方面是轻量级的,Spring框架大约只有2MB大小. 1.2.控制反转(IOC):使用控制反转技术实现了低耦合,依赖注入(DI)到对象,而不 ...

  4. PyCharm+Miniconda3安装配置教程

    PyCharm是Python著名的Python集成开发环境(IDE) conda有Miniconda和Anaconda,前者应该是类似最小化版本,后者可能是功能更为强大的版本,我们这里安装Minico ...

  5. 牛客网 PAT 算法历年真题 1010 : 月饼 (25)

    月饼 (25) 时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 月饼是中国人在中秋佳节时吃的一种传统食品,不同地 ...

  6. view的clickable属性和点击background颜色改变

    drawable可以是color(color只能是color) android:background=drawable或者color 当一个view(iamge/text view都可以)的andro ...

  7. startActivityForResult的用法,以及intent传递图片

    开启startActivityForResult. Intent intent = new Intent(); intent.setClass(MainActivity.this, MipcaActi ...

  8. html 打电话 发短信

    打电话:window.location.href = 'tel:'+tel 发短信:window.location.href = 'sms:'+tel

  9. yii2入门安装 Windows7+wamp+yii2

    1.首先先具备环境,下载最新wamp(yii2需要php5.40以上版本的http://www.digpage.com/install.html) wamp下载http://pan.baidu.com ...

  10. mybatis输出sql语句

    方法一: 这种方法是mybatis官网上介绍的,比较好用: log4j.properties: log4j.rootLogger=ERROR,consolelog4j.appender.console ...