文档章节

HTML_CSS

勤劳的开发者px
 勤劳的开发者px
发布于 2017/09/02 13:35
字数 1011
阅读 3
收藏 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
粉丝 3
博文 54
码字总数 108225
作品 0
荆州
程序员
51个css时间轴

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

左辅
2017/12/21
0
0
Struts1二级级联选择问题,一级不选不能选二级,提示

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

毕加索5481
2016/08/11
113
2
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
3.5K
6
22 非常有用 HTML5 + CSS3 表单教程

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

小编辑
2011/10/24
6.2K
3
15 个最棒的 HTML5 和 CSS3 的表单教程

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

红薯
2011/07/20
2.1K
3

没有更多内容

加载失败,请刷新页面

加载更多

android webrtc使用opensl es

1. java层开启开关 peerConnectionParameters = new PeerConnectionClient.PeerConnectionParameters(); 接口中的useOpensles参数设置为true 2. /system/etc/permissions/下新增and......

bill_shen
20分钟前
0
0
读《高性能mysql》记录

1 2

李佳顺
21分钟前
0
0
Element UI框架+Vue开发搭建示例

一、关于Element 1.Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,官方网址:http://element-cn.eleme.io/#/zh-CN 2.Element UI 是饿了么前端团队倾情打造htt...

tianma3798
24分钟前
2
0
Fragment整理

1、Fragment父类 Fragment的父类有两个,分别为android.app.Fragment和android.support.v4.app.Fragment。建议使用android.support.v4.app.Fragment。因为此Fragment在所有的android版本中可...

西米小娅
30分钟前
0
0
mysql报错:所选列未在GROUP BY子句中 的解决方法(laravel框架)

数据库配置文件database.php文件的 'mysql' => [ 'strict' => false] strict改为false,应该是开启宽松模式,就不会报错了...

郭周园
33分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部