一、CSS概述

CSS(Cascading Stytle Sheets)层叠样式表，用来定义网页的显示效果。可以解决HTNL代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果。即CSS将网页内容和显示样式分离，提高了显示功能。

二、CSS与HTML结合方式

1.style属性方式

利用标签中style属性来改变每个标签的显示样式。

<body>

    <div style="background-color: #76EE00;">这是div区域1</div>

    <div>这是div区域2</div>

    <span style="background-color: #76EE00;">这是span区域1</span>

    <span>这是span区域2</span>

    <p style="background-color: #76EE00;">这是p的区域1</p>

    <p>这是p的区域2</p>

</body>

结果:

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

2.style标签方式:(内嵌方式)

在head标签中加入style标签，对多个标签进行统一修改。

<html>

    <head>

        <title>HTML学习</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <style type="text/css">

            div {

                    background-color: #76EE00;

                }

            p{

                 background-color: #CD00CD;

             }

        </style>

    </head>

    <body>

        <div>这是div区域1</div>

        <div>这是div区域2</div>

        <span>这是span区域1</span>

        <span>这是span区域2</span>

        <p>这是p的区域1</p>

        <p>这是p的区域2</p>

    </body>

</html>

结果:

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

3.导入方式

前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。

<html>

    <head>

        <title>HTML学习</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <style type="text/css">

            @import url("css/mycss.css");

            p{

                 background-color: #76EE00;

             }

        </style>

    </head>

    <body>

        <div>这是div区域1</div>

        <div>这是div区域2</div>

        <span>这是span区域1</span>

        <span>这是span区域2</span>

        <p>这是p的区域1</p>

        <p>这是p的区域2</p>

    </body>

</html>

mycss.css

div {

    background-color: #CD00CD;

}

结果:

url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。

三、CSS基本选择器

CSS选择器有三种，如下。

HTML标签名选择器: 使用的是HTML的标签名。

class选择器: 使用标签中的class属性。

id选择器: 使用的是标签中的id属性。

由于上面已经介绍过了HTML标签选择器，下面介绍另外两种。

1.class选择器

在标签中定义class属性并赋值。通过 标签名.class值 对该标签进行样式设置。

(1)相同标签设置不同样式的时候，用class进行区分。

p.pclass_1 { color:#FF0000; }

p.pclass_2 { color:#0000FF; }

<p class="pclass_1">P标签样式</p>

<p class="pclass_2">P标签样式</p>

(2)不同标签进行相同设置的时候，用class进行统一定义。

.classname {color:#00FF00;}

<p class=”classname”>P标签样式</p>

<div class=”classname”>DIV标签样式</div>

<!DOCTYPE html>

<html>

    <head>

        <title>HTML学习</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <style type="text/css">

           <!-- 相同标签 -->

            div.div_hehe{

                background-color: #90EE90;

            }

            <!-- 不同标签 -->

            .haha{

                background-color: #9F79EE;

            }

        </style>

    </head>

    <body>

        <div class="haha">这是div区域1</div>

        <div class="div_hehe">这是div区域2</div>

        <span class="haha">这是span区域1</span>

        <span>这是span区域2</span>

        <p>这是p的区域1</p>

        <p>这是p的区域2</p>

    </body>

</html>

结果:

2.id选择器

与class选择器类似，但格式不同，选择器的名称为: #id值

#pid { color:#0000FF;}

<p id="pid">P标签样式</p>

<!DOCTYPE html>

<html>

    <head>

        <title>HTML学习</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <style type="text/css">

        div#id_div_hehe{

            background-color: #ADFF2F;

        }

        </style>

    </head>

    <body>

        <div id="id_div_hehe">这是div区域1</div>

        <div>这是div区域2</div>

        <span>这是span区域1</span>

        <span>这是span区域2</span>

        <p>这是p的区域1</p>

        <p>这是p的区域2</p>

    </body>

</html>

结果:

多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取就会出错。所以形成习惯，确保id值的唯一性对于以后的数据库设计也很有好处。

优先级: 标签名 < class < id < style属性

四、CSS扩展选择器

1.关联选择器

标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。

     p { color:#00FF00;}

     p b{ color:#FF000;}

     <p>P标签<b>刘德华</b>段落样式</p>

     <p>P标签段落</p>

<html>

    <head>

        <title>HTML学习</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <style type="text/css">

        div{

            background-color: #BF3EFF;

        }

        div b{

            background-color: #ADFF2F;

        }

        </style>

    </head>

    <body>

        <div>这是div<b>区域1</b></div>

        <div>这是div区域2</div>

    </body>

</html>

结果:

2.组合选择器

    对多个不同选择器进行相同样式设置的时候应用此选择器。

    p,div { color:#FF0000;}

     <p>P标签显示段落。</p>

     <div>DIV标签显示段落</div>

注: 多个不同选择器要用逗号分隔开。

<html>

    <head>

        <title>HTML学习</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <style type="text/css">

            div,span{

                background-color: #9F79EE;

            }

        </style>

    </head>

    <body>

        <div>这是div</div>

        <span>这是span</span>

    </body>

</html>

结果:

五、CSS布局属性

1.漂浮属性

(1)float(漂浮)

(2)clear(清除)

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

<html>

    <head>

        <title>HTML学习</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

            <style type="text/css">

                #div1{

                    border: blue solid 1px;

                    width: 500px;

                }

                #div2{

                    float: left;

                }

            </style>

</head>

<body>

    <div id="div1">

        <div id="div2">

            <img src="1.jpg">

        </div>

        <div id="div3">

            如果选择买学区房，就要承受比附近二手房高出每平方米三四万元的价格;移民也并非想移就能移，正所谓牵一发而动全身。然而，无论选择哪一条路，徐女士都还要花大量的精力和财力带女儿参加繁重的课外辅导。

            “无论选择哪一样，都要费尽心力及财力，很累，但真的没办法。”徐女士对《第一财经日报》记者表示，“现在加上舞蹈、钢琴等四类教育培训，我们每个月（两个孩子）的教育支出已经8000多元了。”

            教育资源的不均衡刺激着几大产业的迅猛发展。首先，学区房一直是房产交易市场的暖冬产品，受二手房升温及“二孩放开”等影响，目前的学区房咨询量明显上升;其次，随着“移民爸爸”放弃买学区房，选择移民的故事被大量转发后，包括徐女士在内的不少家长也动了移民的念头;此外，2007年达到1238亿元规模的课外辅导市场，2015年已经突破了6000亿元。

        </div>

    </div>

</body>

</html>

结果:

2.定位属性

(1)position

相对定位

<html>

<head>

<title>HTML学习</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <style type="text/css">

            h2.pos_left

            {

                position:relative;

                left:-20px

            }

            h2.pos_right

            {

                position:relative;

                left:20px

            }

</style>

</head>

<body>

    <h2>这是位于正常位置的标题</h2>

    <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>

    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

    <p>相对定位会按照元素的原始位置对该元素进行移动。</p>

    <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>

    <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>

</body>

</html>

结果:

绝对定位

<html>

<head>

<title>HTML学习</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <style type="text/css">

            h2.pos_abs

            {

                position:absolute;

                left:100px;

                top:150px

            }

</style>

</head>

<body>

    <h2 class="pos_abs">这是带有绝对定位的标题</h2>

    <p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>

</body>

</html>

结果:

HTML基础学习(二)—CSS的更多相关文章

Python入门基础学习二
Python入门基础学习二猜数字小游戏进阶版修改建议: 猜错的时候程序可以给出提示,告诉用户猜测的数字偏大还是偏小: 没运行一次程序只能猜测一次,应该提供多次机会给用户猜测: 每次运行程序,答案 ...
Python基础学习二
Python基础学习二 1.编码 utf-8编码:自动将英文保存为1个字符,中文3个字符.ASCll编码被囊括在内. unicode:将所有字符保存为2给字符,容纳了世界上所有的编码. 2.字符串内置 ...
Go基础学习(二)
数组[array] 数组定义[定义后长度不可变] 12 symbol := [...]string{USD: "$", EUR: "€", GBP: " ...
Django基础学习二
今天继续学习django的基础学习用户提交url如何获得返回值 1.首先需要在工程的urls文件定义指定的urls要路由给哪个函数在这个例子中,我们定义home的urls路由给views里的tes ...
CSS入门基础学习二
我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...
前端学习之路CSS基础学习二
CSS属性相关样式操作: (1)width:为元素设置宽度 (2)height:为元素设置高度 ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响 p{ width: 30px; height ...
jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器语法描述示例标签选择器 E { ...
salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型
看此篇博客前或者后,看一下trailhead可以加深印象以及理解的更好:https://trailhead.salesforce.com/modules/lex_dev_lc_basics 做过cla ...
Node.js基础学习二之POST请求
本篇介绍下 Node.js post 请求需求: 用户登录,前端界面输入用户名和密码,点击登录请求后台验证,根据后台反馈的信息做出响应前端: (1)使用form表单 (2)使用ajax异步请求服 ...

随机推荐

简述.jpg .Gif .png-8 .png-24的区别
最近有很多朋友在开发过程中有时候会遇到图片加载不清晰,透明度失真,或者对图片进行操作之后造成图片损耗的现象,在这里给大家简单介绍一下常用的几种图片格式之间的区别 Gif格式特点: 1.透明性,Gif是 ...
Android 调用jepg库进行图片压缩，保持图片不失真
1. 浅谈为什么Android和iOS图片质量差距那么大? 首先来说,作为一个安卓狗,机器当然用的是安卓的手机.现在的安卓手机大多数都会以高清拍照,动不动就几千万柔光相机来吸引各种买家.买来后,拍照发 ...
Spring+SpringMVC+MyBatis+easyUI整合基础篇（二）牛刀小试
承接上文,该篇即为项目整合的介绍了. 废话不多说,先把源码和项目地址放上来,重点要写在前面. github地址为ssm-demo 你也可以先体验一下实际效果,点击这里就行啦账号:admin 密码:1 ...
Handlebars模板引擎之上手
handlebars Handlebars,一个JavaScript模板引擎,是基于Mustache的扩展.模板引擎的都存在一个上下文环境,这是它的作用区间. 需求:基本使用需要的库 <scr ...
关于使用微信js上传图片笔记
微信js初始化时需要签名,先获取签名(java代码): 1.获取jsapi_ticket,此数据自己保存,有效时长为7200秒 private String getJsticket(String to ...
红黑树 C++实现
#ifndef __RED_BLACK_TREE_H__ #define __RED_BLACK_TREE_H__ namespace lxf { template <typename Key, ...
Swiper3 的特色功能
const与readonly
readonly 关键字与 const: const 字段只能在该字段的声明中初始化.readonly 字段可以在声明或构造函数中初始化. 因此,根据所使用的构造函数,readonly 字段可能具有不 ...
看了一个烟花的html作品 --引用：http://www.w3cfuns.com/blog-5444049-5404365.html
最近老大想把项目改成响应式,一直在学习没时间更新博客.今天看到一个原生的js烟花项目,感觉很好,把记下来,以后把妹用. [run]<!DOCTYPE html><html>&l ...
[原创]ASM动态修改JAVA函数之函数字节码初探
ASM是非常强大的JAVA字节码生成和修改工具,具有性能优异.文档齐全.比较易用等优点.官方网站:http://asm.ow2.org/ 要想熟练的使用ASM,需要对java字节码有一定的了解,本文重 ...

HTML基础学习(二)—CSS