CSSCascading Style Sheet,叠层样式表),作用是美化HTML网页。

/*注释区域*/此为注释语法

一、样式表

(一)样式表的分类

1.内联样式表

和HTML联合显示,控制精确,但是可重用性差,冗余较多。

例:<p style="font-size:14px;">内联样式表</p>

2.内嵌样式表

作为一个独立区域内嵌在网页里,必须写在head标签里面。

<style type="text/css">

p   //格式对p标签起作用

{

样式;

}

</style>

3.外部样式表

新建一个CSS文件,用来放置样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。

注:css文件中不需要写style标签

有些标签有默认的边距,一般写样式表代码的时候都会先去除(也可以设置其他的样式),如下:

注:上图就是先去掉边距和间距。

(二)选择器

1.标签选择器。用标签名做选择器。

2.class选择器。都是以“.”开头。

   注:class选择器可以和标签选择器叠加,显示出不同效果。

3.ID选择器。以“#”开头。

   注:ID选择器可以和标签选择器叠加,显示出不同效果。

<div id="样式名">

4.复合选择器

(1)用“,”隔开,表示并列。

(2)用空格隔开,表示后代。

(3)筛选“.”。

二、样式属性

(一)背景与前景

1.背景:

2.前景字体:

(二)边界和边框

border(表格边框、样式等)、margin(表外间距)。padding(内容与单元格间距)。

(三)列表与方块

widthheight、(topbottomleftright)只有在绝对坐标情况下才有用。

css样式表代码显示:

css文件代码:

 

html文件代码:

运行效果显示:

html基础 CSS样式表的更多相关文章

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

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

  2. 一起学HTML基础-CSS样式表常用样式属性

    样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...

  3. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  4. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  5. HTML基础(三)——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  6. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  7. CSS样式表初学,比C#和JS简单

    今天咱们一起来看下CSS样式表的基本基础 经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚 那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS C ...

  8. CSS样式----CSS样式表的继承性和层叠性(图文详解)

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

  9. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

随机推荐

  1. 第二百三十八节,Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文 ...

  2. jquery图片上传前预览剪裁

    http://www.webmotionuk.co.uk/jquery/image_upload_crop.php http://keleyi.com/a/bjad/liuvpkke.htm 不错的d ...

  3. mfc小工具开发之定时闹钟之---功能介绍

    使用背景: 之前在xp上用过飞雪日历,感觉挺好用的,还有在音频上的兴趣,促使了我也要自己做一个简单的定时闹钟. 之前开发过图片格式的小工具,没来的急分享,后期整理后,一块奉上,写这篇介绍的时候已近完成 ...

  4. bootstrap基础学习九篇

    现在学学bootstrap响应式实用工具 Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎 ...

  5. Oozie安装与部署

    原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/3885162.html 安装基础环境: Hadoop – 2.2.0  Linux – Centos 6. ...

  6. 详略。。设计模式2——单例变形(多例).。。。studying

    ★ 缓存在单例中的使用("单例+缓存"技术) 缓存在编程中使用非常频繁,有着非常关键的数据,它可以帮助程序实现以空间换取时间, 通常被设计成整个应用程序所共享的一个空间,现要求实现 ...

  7. Dynamics CRM 系统自己定义部分的语言翻译

    Dynamics CRM 自带语言切换功能,在官网下载所需语言包安装后,在设置语言中就能看到你所加入的语言.勾选要启用的语言应用就可以.再打开系统设置--语言就能看到可更改用户界面语言的显示了. wa ...

  8. hdu 3835:R(N)(水题,数学题)

    R(N) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  9. 转载:定位ARM Hard Fault 的方法

    转载自:http://www.openedv.com/posts/list/25030.htm 1.用Keil的话,可以做如下操作: 先将fault中断函数的内容改为: HardFault_Handl ...

  10. 烂笔头-Spring3

    1.spring相关jar包的导入 2.配置文件bean.xml <?xml version="1.0" encoding="UTF-8"?> &l ...