文档章节

HTML_CSS

勤劳的开发者px
 勤劳的开发者px
发布于 2017/09/02 13:35
字数 1011
阅读 3
收藏 0
点赞 0
评论 0

1.div和span

<!--块级元素, eg: p,h1-->
<div style="border:solid 1px  red; background-color: blue;">div一</div>
<div>div二</div>
<!--内联元素, img,b-->
<span style="border: 1px dashed red;">span一</span>
<span>span二</span>
  • div
  1. 是块级元素,通常会以新行来开始(和结束)。
  2. 没有特定的含义,作为容器. div一般和css一起来使用
  • span
  1. 是内联元素,内联元素在显示时通常不会以新行开始
  2. 没有特定含义,一般作为文本容器
  • 选择:
  1. div作为容器,经常和css一起使用
  2. span一般作为文本容器

2.什么是CSS

  1. 层叠样式表
  2. 层叠:样式的层层叠加 eg:刷墙
  3. 样式表:样式的集合(属性的集合)

3.css能做什么

  1. 美化页面,修饰页面
  2. 目的:让页面的内容和样式分离(高内聚,低耦合 封装)
  3. html当做毛坯房,css当做装修
  4. 代码复用

4.css语法规范

{
属性:属性值 属性值 属性;
属性:属性值 属性值
}
  • 注意
  1. 属性和属性值用:连接
  2. 如果有多个属性值用空格隔开
  3. 如果有多个属性,属性和属性之间用;隔开

5.html和css结合方式

  • 通过标签的style属性来结合
<!--通过style属性-->
<div style="border: 1px solid red;">div一</div>
  • 通过style标签来结合(一般放在head里面)
<head>
<!--通过style标签-->
<style>
div {            border: 1px solid red;        }
</style>
</head>
  • 通过link标签结合(外部引入)
  1. 创建一个css文件(后缀是css)
  2. 通过link标签引入
<link rel="stylesheet" href="../../css/divcss.css" />

      属性:    href:css文件路径

  • 三种结合方式优先级:

       就近原则(相对于代码,也就是要修饰的标签)

6.css选择器

​        css修饰页面,作用某个标签.CSS选择器就是控制html标签,找到标签

  • 基本选择器

  • 标签选择器; 语法: 标签名{css代码}

  • <style>
    /*标签选择器*/
    div{    border: 1px solid red;}
    </style>

     

  • 类选择器; 语法: .类名{css代码}
  1. <style>
    /*类选择器*/
    .divClass{        border: 1px solid red;    }
    </style>

     

  • id选择器 ;语法: #id名{css代码}

    <style>
    /*id选择器*/
    #divId{        border: 1px red solid;    }
    </style>

     

  • 注意:

        id作为唯一标识(数据库),不要重复

  • 扩展选择器

  • 组合选择器 语法:选择器,选择器{css代码}

  • /*组合选择器*/
    div,span{
    border: 1px solid red;
    }

     

  • 关联选择器 语法:选择器 选择器{css代码}
  1. /关联选择器/
    div span{
    border: 1px solid red;
    }

     

  • 伪类

  1.  a:link {color: #FF0000}    /* 未访问的链接 */
  2. a:visited {color: #00FF00}    /* 已访问的链接 */
  3. a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
  4. a:active {color: #0000FF}    /* 选定的链接 */

7.css浮动属性

  • 设置浮动: float
<div style="float:left;"></div>
  • ​ float的取值:
  1. ​ left:左浮动
  2. ​ right:右浮动
  • 清除浮动:clear
  1. ​ 浮动对后面的元素有影响,对前面的没有影响
<div style="clear:both;"></div>
  1. ​ clear的取值
  • ​ both:清除左右浮动
  • ​ left:清除左浮动
  • ​ right:清除右浮动

8.css盒子模型

  • html的元素(标签)都可以当做盒子

  1. 盒子元素:
  • ​ border:边框
  • ​ width:宽
  • ​ height:高
  • margin:外边距
  • margin:外边距

  • margin-top,上外边距

  • margin-right,右外边距

  • margin-bottom,下外边距

  • margin-left,左外边距

注意:

  • margin:10px; 上下左右都是10px

  • margin:10px,20px; 上下是10px,左右20px

  • margin:10px,20px,30px;上是10px,右是20px,下30px,

padding:内边距,里面的元素和边框之间的距离

  • padding-top,上内边距

  • padding-right,右内边距

  • padding-bottom,下内边距

  • padding-left,左内边距

9.css常用属性

  • 边框属性

​ 语法:border : border-width|border-style|border-color, 值的顺序随意

eg: <div style="border:solid 1px  red;"></div> //给这个div设置了红色的,宽度是1px,红色的边框
border-style:solid实心的,dashed:虚线
  • 文字属性

​ font-size:字体大小

​ font-family:字体类型

​ color:设置字体颜色

​ text-decoration:设置文本的装饰。

text-decoration的取值 说明
blink 闪烁
underline 下划线
line-through 贯穿线
overline 上划线
none 无装饰
  • 背景属性

​ background-color:背景颜色

​ background-image:背景图片

  • list-style-image:列表项前的小图片
eg:<style>
li{
list-style-image: url(../../img/reg4.gif);
}
   </style>
  • display属性
  1. ​ block:显示
  2. ​ none:隐藏

© 著作权归作者所有

共有 人打赏支持
勤劳的开发者px
粉丝 2
博文 51
码字总数 108225
作品 0
荆州
程序员
51个css时间轴

51个纯css时间轴 51个纯html和css时间轴(包括横向时间轴和纵向时间轴),只有少部分时间轴有用到javascript。 示例和下载代码都在zip文件中。 纵向时间轴 时间轴截图 时间轴 时间轴: HTML ...

左辅 ⋅ 2017/12/21 ⋅ 0

20 个卓越的 CSS3 Web表单教程

Clean and Stylish CSS3 Form More Information on Clean and Stylish CSS3 Form Create a Stylish Contact Form with HTML5 & CSS3 More Information on Create a Stylish Contact Form wit......

红薯 ⋅ 2011/08/06 ⋅ 6

Struts1二级级联选择问题,一级不选不能选二级,提示

级联操作,若果不选择处罚类别,则无法选择处罚种类 //处罚种类 function refreshDataUnit(value) { if("01" == value){ $("select[name='peanal']").prop("disabled",false); $("select[na......

毕加索5481 ⋅ 2016/08/11 ⋅ 2

HTML5和CSS3开发工具资源汇总

HTML5和CSS3已经开始彻底变革全世界的Web前端开发和Web设计发展格局,因为他们给这个领域带来了太多太多令人惊奇的新特性!我用大量时间学习了HTML5和CSS3技术,它们的动画、圆角等特效会令你...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

15 个最棒的 HTML5 和 CSS3 的表单教程

HTML5 和 CSS3 为网页开发带来了更好的体验,更佳的效果,本文主要是利用 HTML5 和 CSS3 制作一些效果非常好的表单的教程,以供参考。 Create a Stylish Contact Form with HTML5 & CSS3 Bu...

红薯 ⋅ 2011/07/20 ⋅ 3

22 非常有用 HTML5 + CSS3 表单教程

使用 HTML5 和 CSS3 你可以创建各种创新的 Web 表单,在接下来的内容中我们将为你推荐 22 个这样的教程。 登录表单 HTML5 & CSS3 联系表单 构建一个简单的联系表单 样式漂亮的联系表单 用户注...

小编辑 ⋅ 2011/10/24 ⋅ 3

给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

30 个必须看的 HTML 5 教程

HTML5 和 CSS3 拓展了Web 设计的可能性。有很多大量的设计师和开发者在web设计中开始学习并使用HTML 5。 这次我们推荐的30个有用的HTML 5 教程,相信会帮助开发者提升技能。列表如下: Maki...

小卒过河 ⋅ 2011/07/29 ⋅ 7

3 款新鲜的CSS3 & HTML5 框架

每个人都知道,会从优秀的CSS/HTML 框架中受益匪浅。下面介绍3个相对比较新的HTML5和CSS3框架。 Inuit.CSS – CSS Framework Inuit.CSS 框架,作者Harry Roberts 。该框架主要针对的是中等或...

老枪 ⋅ 2011/05/13 ⋅ 3

30 个有用的 HTML5 和 CSS3 表单设计

基本上表单是任何一个网站都必须要用到的元素,本文介绍的这 30 个设计方案供你参考,这些方案如果要单独下载完整可运行的文件则需要支付2-5美元的费用。 1. Fresh Forms 2. Pretty Forms 3...

oschina ⋅ 2013/08/21 ⋅ 15

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java软件工程师简历中项目经验怎么写?

作者:暗灭 链接:https://www.zhihu.com/question/20695310/answer/180691302 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 直接给你贴个我自己的简历...

颖伙虫 ⋅ 30分钟前 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部