css（Cascading Style Sheet）叠层样式表。用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

一：样式三种控制方法

1、行内样式：

<div  style="height:100p; width:100px border:solid;  red;"></div>

2、内嵌式

(1)标签选择器                                                                                                                                                       优先级：标签选择器<class<id

<title></title>

<style type ="text/css">

div

{

width:100px;

height:20px;

border:solid 1px red;

}

</style>

<body>

<div></div>

</body>

（2）class选择器

<title></title>

<style type ="text/css">

div

{

width:100px;

height:20px;

border:solid 1px red;

color:green;

}

.c1

{

color:#F00(文字颜色);  (文字颜色显示class里面设置的颜色)

}

.c2

{

font-size:36px;

}

</style>

<body>

<div>  你好1</div>

<div class=“c1 c2”>  你好2</div>                                                                                               如果c1跟c2的样式有重复，c2的样式会将c1的样式覆盖了

<p class="c1">p标签也可以使用class选择器</p>                                                                       多个标签可以共用一个class,一个标签可以写多个class

</body>

（3）id选择器

<title></title>

<style type ="text/css">

div

{

width:100px;

height:20px;

border:solid 1px red;

color:green;

}

.c1

{

color:#F00(文字颜色);  (文字颜色显示class里面设置的颜色)

}

.c2

{

font-size:36px;

}

#d1

{

color:green;

}

</style>

<body>

<div>  你好1</div>

<div class=“c1 c2”>  你好2</div>                                                                                               如果c1跟c2的样式有重复，c2的样式会将c1的样式覆盖了

<p class="c1">p标签也可以使用class选择器</p>                                                                       多个标签可以共用一个class,一个标签可以写多个class

<div id="d1"  class = "c1">你好3</div>                                                                                      id不能重复也不能是多个的，显示d1的样式，因为优先级：标签选择器<class<id

</body>

3、链接式

<title>标题</title>

<link rel = "stylesheet" type="text/css"  href="css/demo.css(相对路径)"/>

4.导入样式（基本不用了，整个网页内容加载之后，才去加载样式表）

<title>标题</title>

<link rel = "stylesheet" type="text/css"  href="css/demo.css(相对路径)"/>

<style>

@import url(css/demo.css)

</style>

当同时有行内样式，内嵌式，链接式出现时，采取就近原则； css的注释：  /*   */  Html的注释：<!--                -->

二：css字体样式

#d1

{

font-size:24px;(字体大小)

font-family:"隶书"；（字体类型，电脑中有什么字体才能设置什么字体，C:\Windows\Fonts中看）

font-weight:700;(文字粗细，数值越大，字体加粗越厉害)

color:red;(字体颜色)

Text-decoration:underline    /*下划线*/

Text-decoration:overline     /*顶划线*/

Text-decoration:line-through; /*删除线*/

width:100px;

height:100px;

border:solid 1px red;

text-align:center/right/left(默认left);(水平居中)

line-height:100px;(lineheight值与高度相同)（垂直居中）

Text-transform:capitalize  /*单词首字大写*/

Text-transform:uppercase /*全部大写*/

Text-transform:lowercase /*全部小写*/

Letter-spacing:10px (默认为normal)（字符间距）

}

<div id="d1"><p>google（这里的p标签只继承了文字的特性）</p></div>

计算机-工具-文件夹选项-查看，找到显示文件扩展名那一栏，可显示文件的扩展名；

FScapture(取色，测量，可以去掉电脑上任何一个地方的颜色)

Html标签第二课css的更多相关文章

  1. HTML第二课——css【2】

    请关注公众号:自动化测试实战 现在继续上一节课的内容,看下面代码: <!DOCTYPE html><html><head>    <meta charset= ...

  2. 萌新接触前端的第二课——CSS

    前端知识——CSS CSS(英文全称:Cascading Style Sheets) 中文名层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各 ...

  3. HTML第二课——css

    请关注公众号:自动化测试实战 先给大家提个建议,就是用sublime编辑器来编写.用其他的也无所谓,我只是建议,因为这个会帮你自动补全很多代码. css概念 css叫层叠样式表.意思就是一层一层的叠加 ...

  4. CI(CodeIgniter)框架入门教程——第二课 初始MVC

    本文转载自:http://www.softeng.cn/?p=53 今天的主要内容是,使用CodeIgniter框架完整的MVC内容来做一个简单的计算器,通过这个计算器,让大家能够体会到我在第一节课中 ...

  5. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  6. 【JavaScript从入门到精通】第二课

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  7. 【Web探索之旅】第二部分第二课：服务器语言

    内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HT ...

  8. 【Linux探索之旅】第一部分第二课：下载Linux，免费的噢

    内容简介 1.第一部分第二课:下载Linux,免费的噢 2.第一部分第三课预告:测试并安装Ubuntu 下载Linux,免费的噢 大家好,上一课我们认识了非常“霸气侧漏”的Linux操作系统. 也知道 ...

  9. Asp.Net Web API 2(CRUD操作)第二课

    Asp.Net Web API 2(CRUD操作)第二课 Asp.Net Web API 导航   Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok ...

随机推荐

  1. angularjs指令系统系列课程（5）：控制器controller

    这一节我们来说一下controller这个参数 一.指令控制器的配置方法: 对于指令我有两种配置路由的方式:1.在html中直接引用,2,在指令的controller参数里定义 第一种:在html中直 ...

  2. django框架代码基础

    urls.py 导入相对应的模块from django.conf.urls import url,includefrom django.contrib import adminfrom son1.vi ...

  3. zend studio 10破解/汉化

    http://blog.csdn.net/qq1355541448/article/details/16807429

  4. Keil软件常见的警告和错误含义。——Arvin

    1. warning:  #767-D: conversion from pointer to smaller integer 解释:将指针转换为较小的整数 影响:可能造成的影响:容易引起数据截断,造 ...

  5. MemCache中的内存管理详解

    MC的内存管理机制 1.内存的碎片化 当我们使用C语言或者其他语言进行malloc(申请内存),free(释放内存)等类似的命令操作内存的时候, 在不断的申请和释放的过程中,形成了一些很小的内存片段, ...

  6. django 模型

    一.project 与app之间的关系 1个project中可包含多个app eg:包含两个app的project的结构

  7. CI3.0控制器下面建文件夹 访问一直404 的解决方法

    在单入口文件(框架目录下面的index.php)最下面的require_once BASEPATH.'core/CodeIgniter.php';这行上面设置一个路径,是相对于conrollers文件 ...

  8. Ajax聊天

    结构: index.html <!DOCTYPE html> <html> <head> <title>index.html</title> ...

  9. centos6.5安装node.js

    一次偶然的机会知道有nodejs这个东西,确实对它还是很感兴趣的.刚开始只知道它能让javascript写后台,然后前后台都由javascript来写,确实觉得真的挺爽,毕竟人总是喜欢在自己熟悉领域做 ...

  10. jquery阻止元素冒泡的两种方法

    通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...