CSS 简介

需要具备的基础知识

在继续学习之前，你需要对下面的知识有基本的了解：

  • HTML
  • XHTML

CSS 概述

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

style应用的方式：

style样式的应用有三种方式：

1.在标签上面通过style属性设置.

<body>

    <div style="background-color: red;color: green;">

        hello world<br>

        welcome to china

    </div>

</body>　　

2.将sytle样式写在<head></head>中，然后使用class引用样式.免代码重用，和代码可以避简洁.

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        .logo {

            background-color: red;

            font-size: 18px;

            border: 1px;

        }

        .logo a{                            <!--a标签拥有logo属性,并引用自己的属性 -->

            font-size: 56px;

         

        }

 

        .logo a,p{                          <!--a和p标签同时拥有logo属性 -->

            font-size: 56px;

            background-color:yellow;

        }

    </style>

</head>

 

<body>

<div class="logo">              <!--让a标签和p标签同时拥有logo属性 -->

    <div>div标签</div>

    <a>a标签</a>

    <p>p标签</p>

 

    </div>

</body>

</html>　　

3.将sytle样式写入common.css文件中然后倒入使用.这种方法支持多个文件使用同一个css样式文件.代码简洁方便，推荐使用.

#css/common.css文件：

.a1{

            background: red;

        }

.a2{

            background: yellow;

        }

.logo {

            font-size: 56px;

            background-color:lightslategrey;

        }

.c {

            font-size: 20px;

            background-color: red;

}

########################################

#html文件

<head>

<link rel="stylesheet" href="css/common.css"/>    <!--倒入css样式文件 -->

</head>

<body>

    <div class="a2">hello world</div>　　　　　　　　<!--引用css样式中的a2属性 -->

    <span class="logo">goodbye</span>

</body>

css选择器：

1.标签选择器

div{

		background-color:red;

		 }

<div > </div>

2.class选择器

.bd{

		 background-color:red;

		  }

<div class='bd'> </div>

3.id选择器

#idselect{

		background-color:red;

		 }

<div id='idselect' > </div>

上述三种选择器使用最广泛的为class选择器

4.关联选择器　

#idselect p{

		background-color:red;

		 }

<div id='idselect' >

		 <p> </p>

		</div>

5.组合选择器

#让cc1和cc2应用同一个样式

.c1 #il a .cc1,.cc2{

				background-color:red;

				 }

6.属性选择器

<head>

.conn input[type='text']{

			width:100px; height:200px;

			 }

</head>

<body>

<div class="conn">

				<input type="text"/>

				<input type="password"/>

				</div>

</body>

CSS常用属性:

background属性

background-color

background-image

background-repeat

    <div style="background-color: red">hello world</div>　　　　　　　　　　　　#设置背景颜色

    <div style="background-image:url('image/4.gif'); height: 80px;"></div>　　#设置背景图片属性，div特别大，图片特别小时图片叠加

    <div style="background-image:url('image/4.gif'); height: 80px;background-repeat:no-repeat"></div>　　#不要重复

background-position(背景位移)

height:31px;				#挖洞的高和宽

width:26px;

background-position  #移动图片位置

border(边框)属性：

solid 表示实线，边框颜色是红色

dotted表示虚线

<body>

<h2>border</h2>

<div style="border: 20px solid red;height: 10px"></div>

<div style="border: 2px dotted red;height: 10px"></div>

</body>

dispaly属性：

隐藏或显示样式或字体

块级标签和内联标签是可以相互转换的

display:none  隐藏不显示

display:block display设置为block时由内联标签变为块级标签

display:inline display设置为inline时由块级标签变为内联标签

<span style="background-color: red">asdf</span>

<span style="display: none;">asdf</span>

cursor属性：

鼠标放在不同位置显示不同的图标

<body>

<ul>

    <li>css提供的cursor值</li>

    <p>

        <span style="cursor:pointer;">pointer</span>

        ||

        <span style="cursor:help;">help</span>

        ||

        <span style="cursor:wait;">wait</span>

        ||

        <span style="cursor:move;">move</span>

        ||

        <span style="cursor:crosshair;">crosshair</span>

    </p>

</ul>

</body>

float(浮动)　

页面的布局，通过设置float属性来布局页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        .w-letf{

            width:20%;                  <!--宽度-->

            background-color: red;      <!--背景-->

            height:500px;               <!--高度-->

            float: left;                <!--向左漂移-->

        }

        .w-right{

            width: 80%;

            background-color: green;

            height: 500px;

            float: left;

        }

    </style>

</head>

<body>

<div>

    <div class="w-letf"></div>

    <div class="w-right"></div>

</div>

</body>

</html>　　

　

<div style="background-color: red;">

    <div style="float: left;">1111</div>

    <div style="float: left;">2222</div>

    <div style="clear: both;"></div>            #加上词句为强制显示父标签，不然上面两个子div float后父div背景颜色就被冲掉了

</div>

显示父标签样式

内外边距

padding(内边距)：增加自己本身的高度和宽度

<div style="background-color: green;height: 200px ">

       <div style="background-color: red;height: 50px;padding-top: 20px"></div>

    </div>

margin(外边距)：外面增加高度和宽度

<div style="background-color: green;height: 200px ">

        <div style="background-color: red;height: 50px;margin-top: 20px"></div>

    </div>

margin:0 auto;  -->想让页面居中，加上此参数即可

position 位置固定：

http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html

fixed  - 固定浏览器窗口位置

<body>

 <a style="position: fixed;left: 30px;top: 30px;">返回顶部</a>

    <div id="content" style="height: 2000px;background-color: greenyellow"></div>

    <a style="position: fixed;right: 30px;bottom: 30px;"href="#content">返回顶部</a>

</body>

relative
absolute　　(默认放在浏览器的)右下角
这两个放在一起用

<body>

    <div style="position: relative;background-color: beige;width: 300px;margin: 0 auto;height: 300px">

        <h1>修改数据</h1>

        <a style="position: absolute;right: 0;bottom: 0px;">hello</a>

    </div>

</body>

overflow
　　　　auto 　　 　--当内容超出div大小时，设置为overflow:auto会出现滚动条.
　　　　hidden 　　--隐藏，当内容超过div大小时，多出的内容将被隐藏

<div style="height: 100px;background-color: greenyellow;overflow: auto">

    hello world<br>

    hello world<br>

    hello world<br>

    hello world<br>

    hello world<br>

    hello world<br>

    hello world<br>

    hello world<br>

</div>

<div style="height: 100px;background-color: greenyellow;overflow: hidden">

    hello world<br>

    hello world<br>

    hello world<br>

    hello world<br>

    hello world<br>

    hello world<br>

    hello world<br>

    hello world<br>

</div>

不让页面有边距方法；
想让整个页面无边框，给body加上样式即可

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            margin: 0 auto;

        }

    </style>

</head>

<body>

<div style="height: 100px;background-color: greenyellow;overflow: hidden">

    hello world<br>

    hello world<br>

    hello world<br>

    hello world<br>

</div>

</body>

透明度   opacity
z-index
z-index 值越大越靠近显示，值越小越靠近底层

<body>

hello html/css/js

<div style="height: 2000px;"></div>

<input type="button" value="提交数据"/>

<div style="z-index: 1;opacity: 0.5;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: black"></div>

<div style="z-index: 2;position: fixed;left: 50%;top: 50%;margin-left: -150px;margin-top: -50px">

    <div style="background-color: white;width: 300px;height: 100px;">

        <input/>

        <input/>

        <input/>

    </div>

    </div>

</body>

页面布局代码样例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

           body{

            margin: 0 auto;

        }

        .pg-header{

            background-color: darkslateblue;

            height: 48px;

        }

        .pg-body .menu{

            background-color: cornflowerblue;

            position: absolute;

            top: 50px;

            left: 0;

            bottom: 0;

            width: 200px;

            overflow: auto;

        }

        .pg-body .content{

            background-color: chartreuse;

            position: absolute;

            right: 0;

            top: 50px;

            bottom: 0;

            left: 210px;

            overflow: auto;

        }

    </style>

</head>

<body>

<div class="pg-header">页面布局</div>

    <div class="pg-body">

        <div class="menu">

            <a>123</a>

            <a>123</a>

            <a>123</a>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

            <p>123</p>

        </div>

        <div class="content">

            abcd

            <div style="height: 1000px;">

                <h1 style="color: #FF6600">fdafdaf</h1>

            </div>

        </div>

    </div>

</body>

</html>

CSS 简介的更多相关文章

  1. html5快速入门（二）—— CSS简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  2. CSS那些事儿-阅读随笔1（CSS简介与选择符）

    最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...

  3. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. CSS（一）：CSS简介和基本语法

    一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet:即层叠样式表.样式定义了如何显示HTML或XHTML元素.包括对字体.颜色.边距.高度.宽度.背景图片.网页定位等 ...

  5. IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

    HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...

  6. CSS：CSS 简介

    ylbtech-CSS:CSS 简介 1.返回顶部 1. CSS 简介 你需要具备的知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML / XHTML 如果你希望首先学习这些项目,请在  ...

  7. Bulma CSS - 简介

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是什 ...

  8. CSS 简介/特点/优势/给特定浏览器提供不同样

    1.CSS简介 CSS全称Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”,通常称为CSS样式或者样式表.CSS是一些纯文本内容,文件格式为.css. 2.CSS特点 ...

  9. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

随机推荐

  1. cygwin-使用介绍

    cygwin使用: 使用上的方便性很是不错,启动Cygwin以后,会在Windows下得到一个Bash Shell,由于Cygwin是以Windows下的服务运行的,所以很多情况下和在Linux下有很 ...

  2. Handler消息机制与Binder IPC机制完全解析

    1.Handler消息机制 序列 文章 0 Android消息机制-Handler(framework篇) 1 Android消息机制-Handler(native篇) 2 Android消息机制-H ...

  3. Java 垃圾收集机制

    对象引用 Java 中的垃圾回收一般是在 Java 堆中进行,因为堆中几乎存放了 Java 中所有的对象实例.谈到 Java 堆中的垃圾回收,自然要谈到引用.在 JDK1.2 之前,Java 中的引用 ...

  4. 【BZOJ-1367】sequence 可并堆+中位数

    1367: [Baltic2004]sequence Time Limit: 20 Sec  Memory Limit: 64 MBSubmit: 932  Solved: 348[Submit][S ...

  5. 【bzoj1408】 Noi2002—Robot

    http://www.lydsy.com/JudgeOnline/problem.php?id=1408 (题目链接) 题意 定义了3种数,分别求这3种数的φ的和,其中φ(1)=0. Solution ...

  6. Cloud Design Patterns Book Reading(undone)

    目录 . the most common problem areas in cloud application development ) Availability ) Data Management ...

  7. Groupby - collection processing

    Groupby - collection processing Iterator and Iterable have most of the most useful methods when deal ...

  8. DIY(码表)制作实验

    代码: #include<reg52.h>typedef unsigned char u8;typedef unsigned int  u16;/********端口定义********* ...

  9. 9.12 其他样式；JS

    Display 显示block和隐藏none,不占位置Visbility 显示visible和隐藏hidden,占位置Overflow 超出范围 hidden隐藏透明圆角 Js脚本语言(JavaScr ...

  10. sql 分页的两种写法

    string Strsql = string.Format(@"select ee.DOCUMENTNO,ee.APPLICANTNAME,ee.COMPANY,ee.REQUESTTIME ...