文档章节

第4章 初探CSS

gtandsn
 gtandsn
发布于 2016/12/08 19:45
字数 1059
阅读 2
收藏 0

CSS:层叠样式表,用于html文档的呈现

一、定义和应用样式

background-color(属性):grey(值); color:white

关于css的属性请参考:http://www.w3school.com.cn/cssref/index.asp

内嵌样式:

 <a href="http://apress.com" style="background-color:grey; color:white">
            Visit the Apress website
        </a>

文档内嵌样式:

  <head>
        <title>Example</title>
        <style type="text/css">
            a {
                background-color:grey;
                color:white
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>

顺便讲一下padding 和margin的区别:

用盒子模型说明一下:假设盒子是一个div,盒子的内壁是border,盒子里放的是硬盘,硬盘与边框之间的距离叫做padding ,盒子与盒子之间的距离叫margin.

比如设一个div的padding属性,它的子标签元素会相应移动。而设置它的margin属性,这个div整个标签会依据兄弟元素或父元素移动.

   <head>
        <title>Example</title>
        <style type="text/css">
            a {
                background-color:grey;
                color:white
            }
            span {
                border: thin black solid;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>

外部样式使用:

import:样式表中导入其它样式

charset:样式表中的字符编码。不申明依赖文档编码。

二、样式的层叠和继承

样式来源:除上面讲的三种还有两种:浏览器样式和用户样式

浏览器样式:用户没有设置样式时,浏览器自动加在元素身上的样式

        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a href="http://w3c.org">Visit the W3C website</a>

用户样式:允许用户自定义自已的样式表custom.css.特殊功能

什么是层叠?

优先级:

内嵌--文档--外部样式--用户样式--浏览器样式

import用打乱这种顺序,但是用户样式表中的import能干过他。

    <head>
        <title>Example</title>
        <style type="text/css">
            a {
                color: black !important;
            }
        </style>
    </head>
    <body>
        <a style="color:red" href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>

什么是继承?

如果找不到就会云父元素找。

 <head>
        <title>Example</title>
        <style type="text/css">
            p {
                color:white;
                background:grey;
                border: medium solid black;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>

不是所有的css属性都可以继承,与无素外观相关的会被继续,其它的不会

inherit:强型继承

 <head>
        <title>Example</title>
        <style type="text/css">
            p {
                color:white;
                background:grey;
                border: medium solid black;
            }
            span {
                border: inherit;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>

三、CSS中的颜色

     表示方式:名称,十六进制,rgb函数

     详细参考:http://www.w3school.com.cn/cssref/css_colors.asp

四、CSS中的长度

        绝对长对:in,cm,mm,pt,pc

 <head>
        <title>Example</title>
        <style type="text/css">
            p {
                background: grey;
                color:white;
                width: 5cm;
                font-size: 20pt;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </bod

        相对长度:

       em:与字号挂勾

 <head>
        <title>Example</title>
        <style type="text/css">
            p {
                background: grey;
                color:white;
                font-size: 15pt;
                height: 2em;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <p style="font-size:12pt">I also like mangos and cherries.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>

      ex:相对于字符“x”的高度,一般为字体高度的一半

     rem:与根元素字号挂勾

 <head>
        <title>Example</title>
        <style type="text/css">
            html {
                font-size: 0.2in;
            }
            p {
                background: grey;
                color:white;
                font-size: 2rem;
                height: 2em;
            }
        </style>
    </head>
    <body style="font-size: 14pt">
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>

     px :

像素为显示设备上可寻址的最小单元---图像的基本元素

 <head>
        <title>Example</title>
        <style type="text/css">  
            p {
                background: grey;
                color:white;
                font-size: 20px;
                width: 200px;
                
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>

    %

   <head>
        <title>Example</title>
        <style type="text/css">  
            p {
                background: grey;
                color:white;
                font-size: 200%;
                width: 50%;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>

 

 

© 著作权归作者所有

共有 人打赏支持
gtandsn
粉丝 0
博文 44
码字总数 28171
作品 0
成都
书籍推荐:《实战Java虚拟机——JVM故障诊断与性能优化》下载

本书详细介绍Java虚拟机的基本原理和优化诊断方法。其中重点介绍Java虚拟机的体系结构、常用的虚拟机参数、Java虚拟机的垃圾回收原理、算法以及目前虚拟机所支持的各种垃圾回收器及其区别、特...

ddddd8
2017/11/29
0
0
【HTML5初探之绘制图像(下)】看我canvas元素引领下一代web页面

导航 【初探HTML5之使用新标签布局】用html5布局我的博客页! 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放 【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面...

范大脚脚
2017/12/13
0
0
微软面试、经典算法、编程艺术、红黑树4大系列总结

无私分享,造福天下 以下是本blog内的微软面试100题系列,经典算法研究系列,程序员编程艺术系列,红黑树系列4大经典原创系列作品与一些重要文章的集锦。 一、微软面试100题系列 横空出世,席...

长平狐
2013/01/06
262
0
【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面

导航 【初探HTML5之使用新标签布局】用html5布局我的博客页! 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放 【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面...

范大脚脚
2017/12/06
0
0
Docker进阶与实战_帝都客_ pdf扫描版_完整版_资源免费下载

《Docker进阶与实战》由机械工业出版社出版。 PDF下载地址 :http://www.diduker.com/html/4640.html PDF相关截图 : 编辑推荐 作者简介 华为Docker实践小组,致力于容器技术探索,结合华为C...

909636801
07/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
0
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
0
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0
OSChina 周一乱弹 —— 有人要给本汪介绍妹子啦

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享水木年华的单曲《中学时代》@小小编辑 手机党少年们想听歌,请使劲儿戳(这里) @须臾时光:夏天还在做最后的挣扎,但是晚上...

小小编辑
今天
21
5
centos7安装redis及开机启动

配置编译环境: sudo yum install gcc-c++ 下载源码: wget http://download.redis.io/releases/redis-3.2.8.tar.gz 解压源码: tar -zxvf redis-3.2.8.tar.gz 进入到解压目录: cd redis-3......

hotsmile
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部