文档章节

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:隐藏

© 著作权归作者所有

共有 人打赏支持
上一篇: JavaScript
下一篇: HTML入门
勤劳的开发者px
粉丝 3
博文 54
码字总数 108225
作品 0
荆州
程序员
私信 提问
51个css时间轴

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

左辅
2017/12/21
0
0
hubcarl/smart-grunt

Grunt前端一体打包框架 1、支持HTML、CSS、JavaScript 压缩混淆 2、支持CSS、JavaScript 自动引用合并 3、支持image、js、css、html和变量引入 4、支持js、css、html 压缩合并,image压缩 5、...

hubcarl
2015/09/17
0
0
jQuery:1.[3-4],jQuery基础学习(二)

ylbtech-jQuery:jQuery学习 HTML操作 改变 HTML 元素的内容。 向 HTML 元素追加内容。 在 HTML 元素之后追加内容。 CSS操作 改变 HTML 元素的 CSS 属性。 改变多个 CSS 属性。 获得元素的 CS...

吞吞吐吐的
2017/10/18
0
0
css link和@import区别用法

1、link语法结构 实际应用截图: 使用link标签截图 Html link标签说明 此标签是引入CSS文件link标签,只要设置好路径即可。 扩展阅读:html link 2、@import语法结构 @import + 空格+ url(CSS...

科技探索者
2017/11/09
0
0
HTML-CSS

前言   现在说到干WEB前端,要是不懂得HTML,那可就太不应该了,HTML(hypertext markup language)即超文本标记语言,html文件是带有格式标识符和超文本链接的内嵌代码的ascii 文本文件,...

dfhgshgdf
2017/09/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

windows10小鹤双拼注册表

《安全第一》直接发文本内容,自己建文本,改文本后缀reg。 使用方法: 1.复制下示文本内容,打开你的文本编辑器(#记事本notepad或其他++),粘贴文本内容并保存在任意位置(不影响使用) ...

漫步海边小路
6分钟前
0
0
一、数据挖掘

数据挖掘的发展动力---需要是发明之母 数据爆炸问题 自动数据收集工具和成熟的数据库技术使得大量的数据被收集,存储在数据库、数据仓库或其他信息库中以待分析。我们拥有丰富的数据,但却缺...

凯文加内特
9分钟前
0
0
Java线程池ThreadPoolExecutor

线程池 ThreadPoolExecutor 线程池是ExecutorService的实现,可以通过Executors执行工厂构造不同类型的执行服务(线程池)。 ThreadPoolExecutor线程池使用的是阻塞队列BlockingQueue。 用于...

器石_
10分钟前
1
0
Mybatis 实现SQL拦截并在控制台打印SQL和参数

注:可以拦截sql 执行时间,优化sql。并打印sql 以及参数 第一步:创建类: SqlPrintInterceptor 并实现 Interceptor 该类如下: package com.ra.common.plugin;import org.apache.ibati...

轻量级赤影
13分钟前
1
0
Log4j2 配置

config: <?xml version="1.0" encoding="UTF-8"?><!-- http://logging.apache.org/log4j/2.x/manual/appenders.html --><!-- status 负责打印日记系统的 WARN 级别以及以上的日记 --><C......

Credo-Zhao
13分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部