一、样式表分类

1、内联样式表

<p style="fint-size:24px;">直接在标签内部进行样式设置</style>

2、内嵌样式表

<head>

<style type="text/css">

p    /*以p标签命名，一下所有p标签都会执行此样式*/

{

样式}

</style>

</head>

3、外部样式表（最常用的）

新建一个css文件，需要在html文件中调用css样式表，需要在html文件中点击右键-css样式-附加样式表。用link链接

*    /*对所有标签去除间距、边距*、

{

margin：0px;

padding:0px;

}

二、选择器

1、class选择器     可以多个使用

<style>

.main

{

height:100px;

width:100%;

text-align:center;

}

</style>

<body>

<div class="main"><div>        调用class样式表

</body>

</body>

2、ID选择器     只可以使用一次

<style>

#a

{

width:100%;

height:100px;

backgroun-color:red solid 2px;}

</style>

<body>

<div id="a"><div>

</body>

3、复合选择器

1）p,span        两种标签同时使用一下样式

{

样式}

2）.main p 在引用.main样式的标签内的p标签时也使用.main样式

<div class="main"><p></p></div>   p标签用div标签属性

3）p.sp（选择）  在所有p标签内使用“class="sp"的执行此样式

<p class="sp"><p>     此项使用上标签

<p></p>       不使用上标签

三、样式属性

1、背景与前景

2、字体属性

3、外边接，边框

4、列表与方框

5、链接的style：

a:link 超链接被点前状态

a:visited 超链接点击后状态

a:hover 悬停在超链接时

a:active 点击超链接时

在定义这些状态时，有一个顺序l v h a

例如 做百度一下

a:link
{
text-decoration:none;
color:#000;}
a:visited
{
text-decoration:none;
color:#000;}
a:hover
{
color:#F00;
text-decoration:underline;}
a:active
{
text-decoration:underline;
color:#FF0;}

CSS的样式表基本概念的更多相关文章

  1. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  2. 11-19网页基础--第二部分CSS样式表基本概念

    CSS,全称(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 一.基本概念:是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 你可能对C ...

  3. CSS级联样式表-css选择器

    CSS概念 Cascading Style sheet 级联样式表 表现HTMl或XHTML文件样式的计算机语言 包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定 建议:把表示样式的代码从 ...

  4. HTML--CSS样式表--基本概念（超链接的状态）

    样式表的基本概念 一.样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;"> ...

  5. css 03-CSS样式表和选择器

    03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几 ...

  6. CSS重置样式表

    网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.第一种方式 * {margin:0px; padding:0px;} 这行代码虽然简单,但却让网页解析太慢.于 ...

  7. 图解 CSS: 理解样式表的逻辑（转载）

    原文:http://www.cnblogs.com/del/archive/2009/02/01/1382141.html 样式表可以是外部的.内联的或嵌入的; 链接外部样式文件一般是:<lin ...

  8. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  9. 学习HTML 第三节.接近正题：HTML样式-CSS级联样式表

    CSS (Cascading Style Sheets)级联样式表 内联样式 内联样式- 在HTML元素中使用"style" 属性 使用内联样式的方法是在相关的标签中使用样式属性. ...

随机推荐

  1. K/3 Cloud开发之旅－－环境准备篇

    K/3 Cloud是金蝶软件新推出的一款产品,介绍我就不多说了,谁用谁知道啊,那么我们如果要基于它做开发需要什么环境呢 开发环境必备软件 1 操作系统Windows X86/X64 或者Windows ...

  2. swift 如何给tabBarItem的相关设计

    //设置tabBarItem的title,以及点击和不点击状态图片 self.tabBarController.tabBarItem = UITabBarItem(title: "投资理财& ...

  3. 我与solr(六)--solr6.0配置中文分词器IK Analyzer

    转自:http://blog.csdn.net/linzhiqiang0316/article/details/51554217,表示感谢. 由于前面没有设置分词器,以至于查询的结果出入比较大,并且无 ...

  4. MATLAB-octave中平面向量场图的可视化

    quiver,平面向量场图 [x, y, z] = peaks(20); [u, v] = gradient(z); contour(x, y, z, 10); hold on, quiver(x,y ...

  5. 60行以内写mvc

    标题党.几天前看到一个30行写mvc的文章,东施效颦,也动手写了个60行的,功能上略微扩充一些,记录下来,后面有时间可以继续优化. mvc其实是一个观察者模式.view来监听model,所以当mode ...

  6. 【NHibernate】列“ReservedWord”不属于表 ReservedWords

    NHibernate+FluentNHibernate+MySql 运行时黄页显示下边的异常,项目中找了半天没出现过这个列的关键字. [ArgumentException: 列“ReservedWor ...

  7. cognos制作报表流程

    第一章 创建报表 制作ReportStudio报表,步骤如下图所示: 第二章 添加查询 1.点击中间栏的查询资源管理器,然后点击查询,就可以新建查询.步骤如下图所示: 2.点击查询出现的页面: 3.在 ...

  8. Enable MFA for a user

    If you are root/admin account, in order to configure a virtual MFA device, you must have physical ac ...

  9. java-代理模式及动态代理

    代理模式 代理模式的作用是:为其他对象提供一种代理以控制对这个对象的访问.在考虑到性能或安全等因素的情况下,一个客户不想或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. ...

  10. Runtime 交换方法

    创建UIImage分类UIImage+Image.h #import<UIKit/UIKit.h> @interfaceUIImage (Image) + (__kindof UIImag ...