CSS的简介

概述: Cascading Style Sheets, 层叠样式表.

作用:

    用来美化页面的.

分类:

    行内样式:    //直接写在元素(html的标签)中的样式.

    内部样式:    //写在<head>标签的,<style>标签中.

    外部样式:    //写在后缀名为.css的文件中.

CSS的引入方式之: 行内样式.

格式:

    <div style="属性名:属性值; 属性名:属性值"></div>

    作用: 只针对于当前元素有效.

CSS的引入方式之: 内部样式.

格式:    //写在<head>标签的,<style>标签中.

    选择器{

        属性名:属性值;

        属性名:属性值;

    }

作用: 针对于当前页面内的部分元素有效.

CSS的引入方式之: 外部样式.

格式:    //后缀名为.css的文件中

    选择器{

        属性名:属性值;

        属性名:属性值;

    }

作用: 可以用来统一整个网站的风格.

CSS中的选择器:

元素选择器:

    格式:

        元素名{

            属性名: 属性值;

            属性名: 属性值;

        }

    作用: 针对于该类元素有效.

id选择器:

    格式:

        #选择器名{

            属性名: 属性值;

            属性名: 属性值;

        }

    作用: 给指定id(id名和选择器名一样的元素)设置样式的.

    //记忆: 每个标签都有id属性, id属性尽量保证唯一.

类选择器:

    格式:

        .选择器名{

            属性名: 属性值;

            属性名: 属性值;

        }

    作用: 用来设置某类元素(class属性的值为 选择器名的元素)的样式的.

后代选择器:

    (元素,id,类)选择器 元素名{

        //样式

    }

    作用: 设置指定的元素内的 指定的"子标签"的样式的.

伪类选择器:

    a:link{}        //未选中连接

    a:active{}        //选定的链接

    a:visited{}        //已访问的链接

    a:hover{}        //鼠标移动到链接上

    作用: 主要用来操作超链接的.

CSS的样式

背景:

    background-color: 设置背景色

字体:

    font-size: 设置字体大小

文本:

    text-decoration:将其值设置为:none,可以取消超链接字体的下划线.

    color: 设置字体的颜色

边框:

    border: 1px solid blue;        //1像素, 蓝色实线

        //solid: 单实线, double:双实线  dotted:(点)虚线 dashed:(-)虚线

    width: 设置标签的宽度

    height: 设置标签的高度

 CSS的浮动

概述: 通常情况下页面的布局: 从上往下逐行分布. 有些时候我们需要页面中的布局方式是从左往右, 或者从右往左之类的自定义页面布局, 就需要用到: 窗体浮动.

    float: //设置浮动.

        属性值: left, right

    clear: //清除浮动.

        属性值: both

 CSS的盒子模型

概述: 也是用于布局的. 正常的一个页面可能有多个div, 每个div的里边可能有其他元素(元素和div之间的间距叫内边距), div与div之间有可能也是有间隙的(外边距).

外边距: margin

内边距: padding

margin: 值1 值2 值3 值4;        //离上,右,下,左的间距分别是: 值1 值2 值3 值4;

margin: 值1(上下) 值2(左右);    //离上,右,下,左的间距分别是: 值1 值2 值1 值2;

margin: 值1;                    //离上,右,下,左的间距分别是: 值1 值1 值1 值1;

CSS简单介绍及应用的更多相关文章

  1. css简单介绍

    css层叠样式表,主要作用就是解决内容与表现分离的问题.html标签有自己的意义当然也是有自己的默认样式的,但有时候我们想修改他的样式,这时候就需要了css. 例:给字体加上颜色,我们有如下几种方法: ...

  2. WeX5的简单介绍及UI的简单讲解

    WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是 ...

  3. HTML简单介绍及举例

    超文本标记语言(Hyper Text Markup Language,简称HTML)是为"网页创建和其他可在网页浏览器中看到的信息"设计的一种标记语言.HTML被用来结构化信息,也 ...

  4. css简单了解

    今天主要是说一下css样式表!HTML结合他使用可以是HTML页面变得很绚丽多彩! 先简单介绍一下为什么要使用CSS(Cascading Style Sheets)层叠样式表! 1．因为CSS样式表可 ...

  5. webpack入门篇--1.简单介绍

    简单介绍: webpack是一个模块打包工具,给js准备的打包工具,可以把很多的模块打包成很少的文件 目标: 1.切分依赖数,分到不同代码块里,按需加载,懒加 载 2.任何静态资源都可以被视为一个模块 ...

  6. Eclipse rap 富客户端开发总结(1) ：rap简单介绍和开发环境搭建

    一.rap简单介绍 1 基本概念     RAP可以让开发人员使用JAVA API和按照Eclipse 插件的开发模式构建基于AJAX的Web 2.0应用程序, RAP的工作原理是采用交叉编译的方式将 ...

  7. Fiddler使用简单介绍

     一,fiddler简介 1.1,什么是fiddler Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的"进出&qu ...

  8. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  9. 浏览器中 F12 功能的简单介绍

    chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...

随机推荐

  1. maven打的包中含源文件jar包

    如何用maven package打的jar包中还包含源文件(resource)jar包: 在pom中如下添加: <build> <plugins> <plugin> ...

  2. C++函数模版实现

    若一个程序的功能是对某种特定的数据类型进行处理,则将所处理的数据类型说明为参数,那么就可以把这个程序改写成为模版,模版可以让程序对任何其他数据类型进行同样方式的处理. 本节主要是说一下C++的函数模版 ...

  3. Cisco DHCP 配置要点

    实验拓扑图:IOU5/6/7模拟主机 IOU1为DHCP服务器 IOU2为DHCP中继器 IOU3/4为局域网内的交换机 在IOU1中配置DHCP配置 IOU2作为DHCP中继,在E0/0.10和E0 ...

  4. C高级第一次作业附加

    之前的作业链接:http://www.cnblogs.com/1204113692yang/p/8625650.html 过去两周学习了指针的概念.指针变量的定义.指针的基本运算.指针操作改变主调函数 ...

  5. 学大伟业DAY2模拟赛

    T1忍者钩爪 题目描述 小Q是一名酷爱钩爪的忍者,最喜欢飞檐走壁的感觉,有一天小Q发现一个练习使用钩爪的好地方,决定在这里大显身手. 场景的天花板可以被描述为一个无穷长的数轴,初始小Q挂在原点上.数轴 ...

  6. Yii登录验证和全局访问用户ID

    注意:Yii默认的代码,Yii::app()->user->id返回的不是我们想要的用户ID,而是用户名.因此在useridentity类中要用一个变量来存储登录用户的ID,然后重载get ...

  7. 也谈TDD，以及三层架构、设计模式、ORM……没有免费的午餐，选择了，必付出代价

    想在园子里写点东西已经很久了,但一直没有落笔,忙着做 一起帮 的开发直播,还有些软文做推广,还要做奶爸带孩子,还要……好吧,我承认,真正的原因是: 太特么的难写了! 但再难写也要写啊,要等到“能写好了 ...

  8. FastAdmin 2018-05-26 更新时更新了 SQL 文件 关于 ROW_FORMAT=DYNAMIC 改为 ROW_FORMAT=COMPACT 问题

    FastAdmin 2018-05-26 更新时更新了 SQL 文件 关于 ROW_FORMAT=DYNAMIC 改为 ROW_FORMAT=COMPACT 问题 观查到 FastAdmin 在 20 ...

  9. Linux 安装交叉编译工具链

    交叉编译工具链下载地址: 链接:http://pan.baidu.com/s/1dE7P9rb 密码:300i 声明:下面每一步中的“pwd”指令都是为了看清楚当前的目录,没有其他实际意义. 系统:u ...

  10. Java并发--CountDownLatch CyclicBarrier ReentrantLock

    CountDownLatch CountDownLatch是一个同步工具类,它允许一个或多个线程一直等待,直到其他线程的操作执行完后再执行.CountDownLatch使用一个数字count初始化,使 ...