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. JArray数组每个JObject对象添加一个键值对

    JArray ja = new JArray(); JObject jo = new JObject(); jo.Add("1","1"); ja.Add(jo ...

  2. mac上的git环境配置

    git生成ssh key for mac 打开终端 cd ~/.ssh 看有没有文件 没有的时候 有有ssh key是这样的多了id_rsa(私钥)和 id_rsa.pub(公钥) 没有的话创建 ss ...

  3. Nginx基础知识之————RTMP模块专题（实践文档）

    on_publish 语法:on_publish url上下文:rtmp, server, application描述:这个可以设置为一个API接口(GET方式接受所有参数),会给这个API接口返回8 ...

  4. Wiki介绍

    Wiki是一种高效的知识管理系统. 我们可以使用wiki构建自己的个人知识管理系统.

  5. Spring MVC Rest服务 返回json报406错误的解决办法

    @ResponseBody & @RequestBody @RequestBody 将 HTTP 请求正文插入方法中,使用适合的HttpMessageConverter将请求体写入某个对象. ...

  6. windbg运行

    运行起来会提示windbg is running. BUSY 这个是正常运行的状态,只有发生异常,或者被指定断点,才会中断.

  7. Working with Data » Getting started with ASP.NET Core and Entity Framework Core using Visual Studio » 读取关系数据

    Reading related data¶ 9 of 9 people found this helpful The Contoso University sample web application ...

  8. (Jquery)关于给动态加载的页面元素，绑定事件

    如果使用Jquery给元素绑定事件,一般会用bind,或者类似click函数来直接绑定. 但是对于动态生成的元素,会发现常规绑定无法生效,比如: <div class'div'></ ...

  9. MySQL JDBC/MyBatis Stream方式读取SELECT超大结果集

    情景: 遍历并处理一个大表中的所有数据, 这个表中的数据可能会是千万条或者上亿条, 很多人可能会说用分页limit……但需求本身一次性遍历更加方便, 且Oracle/DB2都有方便的游标机制. 对DB ...

  10. android SDK下载及中文API地址

    中文API:http://wiki.eoeandroid.com/Android_API_Guides Android Dev Tools官网地址:www.androiddevtools.cn 收集整 ...