css

css样式种类

  • 　　内部样式

    • 在head标签中使用 <style>标签
  • 　　行内样式
    • 直接在标签中写style属性进行赋值,style属性的就相当于内部样式的{}
  • 　　外部样式
    • 单独写一个文件命名为xxx.css,将css代码写入文件,在 <head> 中进行引用

      　　

选择器

　　常用选择器

  • 标签选择器 标签类型{} ,直接写标签的名字就行
  • id选择器 #id名称{} ,id不能重复,需要给标签添加一个id
  • 属性类选择器 .class名称{} class可以重复,需要给标签添
  • 加class属性
  • 并集选择器, 选择器1,选择器2{}
  • 属性选择器 标签[属性="具体属性值"]{} 例如：input[type="text"]{}

文本样式

  • font­style

    • 设置文字样式,常用取值为italic和normal    代码：font-style: italic;
  • font­weight
    • 设置文字的粗细,常用取值 lighter,bold和bolder还可以进行数字取值100,900  代码：font-weight: bold;
  • font­size
    • 设置文字大小,取值是像素   代码：font-size: 100px;
  • font­family
    • 设置字体  代码：font-family: "宋体";
  • text­decoration
    • 文本装饰属性,常用取值underline(下划线)line-­through(删除线)overline(上划线)none(什么都没有) 可以用none去掉a标签的下划线
  • text­align
    • 对齐方式: left right center
  • text­indent
    • 缩进方式 2em代表两个文字宽度
  • color
    • 设置字体颜色”red”

背景样式

  • background­color

    • 设置背景颜色”red”
  • background­image
    • 设置背景图片, background-image:url("img/1.jpg"); ,会自动平铺
  • background­repeat
    • 设置平铺方式,有四个值,repeat(默认),no­repeat(不平铺),repeat­x(水平平铺),repeat­y(垂直平铺)
  • background­position
    • 设置背景定位方式格式为: 水平方向数值 垂直方向数值 ,水平各有left center right ,垂直有top center bottom,也可以是具体的像素值比如 100px 100px
  • background­attachment
    • 设置背景的关联方式常用有两个scroll(会随着滚动条的滚动而滚动),fixed(不会随着滚动而滚动)

边框

border 属性,连写格式 宽度 样式 颜色

盒子模型

  • padding

    • 内容到边框的距离叫做内边距,内边距属性按照的顺序是上右下左顺序进行设置也可以分开进行设置改变内边距元素的宽高会发生改变
    • 设置内边距后元素的自身的宽高会发生改变
    • 设置完内边距后颜色也会被设置上
  • margin
    • 外边距,元素边框与边框之间的距离,依次设置的上右下左
    • margin设置为 0 auto 就代表距离上方0像素,距离左右两边水平居中
  • 盒子模型　　
    • 元素的宽度:左边边框+左边内边距+内容宽度+右边内边距+右边边框
    • 元素的高度:上边边框+上边内边距+内容高度+下边的内边距+下边边框
    • 元素空间的宽度:左边的外边距+元素的宽度+右边的外边距
    • 元素空间的高度:上边的外边距+元素的高度+下边的外

标准流

1. HTML标签被分为两种类型,一种是块级标签(独占一行,可以设置宽高),一种是行内标签(不独占一行,不能设置宽高)
2. 我们之前学的所有的标签,都是按照标准流进行排列的,块级元素从上到下,行内元素从左到右
  • display

    • display属性:inline(行内)block(块级)inline­block(行内块级,能够设置宽高),none(隐藏,不占空间)

浮动流

  • float

    • 浮动流,设置属性float能让元素向左或向右进行浮动元素会脱离标准流,那么标准流的元素会相应顶上来其次脱离标准流,会在相应的标准流的行号上进行浮动如果向左或向右进行浮动后,左右两边又有其他元素,就会紧贴那个元素浮动流不分行内和块级元素都可以设置宽高
  • clear
    • 设置clear属性,能够使元素在浮动的过程中不去贴靠其他元素,只能影响自己,不能影响其他元素

定位流

  • 相对定位

    • 不会脱离标准流,相对于在标准流的位置进行偏移,所以下面元素不会顶上来position属性为relative,再结合 top right bottom left 四个属性进行位置的确定
  • 绝对定位
    • 会脱离标准流,所以下面元素会顶上来,相对于在标准流的位置进行偏移设置postion为absolute,通过top right bottom left定位如果祖先元素没有定位流(相对定位,绝对定位,固定定位),绝对定位相对于body定位,如果祖先元素是定位流,绝对定位相对于祖先元素(就近原则)绝对定位不分行内和块级元素都可以设置宽高
  • 固定定位
    • 固定定位脱离标准流设置postion为fixed,通过top right bottom left定位不区分行内和块级和绝对定位相同,唯一不同就是不会随着滚动条滚动而滚动
　　zIndex
　　　　

　　　　z­index 改变定位流中的前后顺序
 
定位流中有一下规律
默认情况下定位流会覆盖标准流
默认情况下后来的会覆盖之前的
定位流中设置z­index,谁的大谁就在前
如果父元素设置z­index,子元素的z­index就失效,谁的
父元素大,谁就会显示在上方(从父原则)
 
 

JavaWeb基础（day14_css）的更多相关文章

  1. JavaWeb基础: ServletContext

    基本概念 Web容器在启动时,会为每个Web应用程序都创建一个对应的ServletContext对象,它代表当前Web应用. ServletContext(javax.servlet.http.Ser ...

  2. JavaWeb基础: 学习大纲

    JavaWeb基础: Web应用和Web服务器 JavaWeb基础: Tomcat JavaWeb基础:HTTP协议和基于Restful的架构 JavaWeb基础: Web工程配置文件 JavaWeb ...

  3. JavaWeb基础知识总结

    JavaWeb基础知识总结.   1.web服务器与HTTP协议 Web服务器 l WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. l Internet上供 ...

  4. 超详细的Java面试题总结（四 ）之JavaWeb基础知识总结

    系列文章请查看: 超详细的Java面试题总结(一)之Java基础知识篇 超详细的Java面试题总结(二)之Java基础知识篇 超详细的Java面试题总结(三)之Java集合篇常见问题 超详细的Java ...

  5. 关于java基础、多线程、JavaWeb基础、数据库、SSM、Springboot技术汇总

    作者 : Stanley 罗昊 本人自行总结,纯手打,有疑问请在评论区留言 [转载请注明出处和署名,谢谢!] 一.java基础 1.多态有哪些体现形式? 重写.重载 2. Overriding的是什么 ...

  6. [Java面试三]JavaWeb基础知识总结.

    1.web服务器与HTTP协议 Web服务器 l WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. l Internet上供外界访问的Web资源分为: • 静 ...

  7. [JavaWeb基础] 002.JSP和SERVLET初级入门

    上一篇中,我介绍了javaweb项目的创建和Tomcat的搭建和部署,接下来我们要在上一篇的基础上去讲解一下简单的jsp和servlet交互,做出一个简单的登陆功能页面.该例子主要讲解了从页面请求道后 ...

  8. [JavaWeb基础] 008.Spring初步配置

    框架简介: Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Develop ...

  9. JavaWeb 基础知识补充

    软件架构 1. C/S: Client/Server 客户端/服务器端         * 在用户本地有一个客户端程序,在远程有一个服务器端程序         * 如:QQ,迅雷...        ...

随机推荐

  1. cb20a_c++_string类型的查找

    cb20a_c++_string类型的查找s.find(args) //精确匹配,顺序查找, abc, 连续的包含在abcde,或者fabcde;s.rfind(args) //精确匹配.反向查找s. ...

  2. C#数据结构与算法系列（十）：逆波兰计算器——逆波兰表达式（后缀表达式）

    1.介绍 后缀表达式又称逆波兰表达式,与前缀表达式相似,只是运算符位于操作数之后 2.举例说明 (3+4)*5-6对应的后缀表达式就是3 4 +5 * 6 - 3.示例 输入一个逆波兰表达式(后缀表达 ...

  3. Head First 设计模式

    OO基础 抽象 封装 多态 继承 OO原则 封装变化 多用组合,少用继承 针对接口编程,不针对实现编程 为交互对象之间的松耦合设计而努力 对扩展开放,对修改关闭 依赖抽象,不要依赖具体类 最少知识原则 ...

  4. android中使用https是否对服务证书合法性校验的新的体会

    package com.cetcs.logreport.utils; import android.content.Context; import org.apache.http.conn.ssl.S ...

  5. Python3-configparser模块-配置文件解析器

    Python3中的configparser模块主要用于处理类似于windows ini 文件结构的配置文件 1.configparser模块提供实现基本配置语言的ConfigParser类 2.配置文 ...

  6. 入门大数据---Spark_Streaming与流处理

    一.流处理 1.1 静态数据处理 在流处理之前,数据通常存储在数据库,文件系统或其他形式的存储系统中.应用程序根据需要查询数据或计算数据.这就是传统的静态数据处理架构.Hadoop 采用 HDFS 进 ...

  7. 入门大数据---Hbase容灾与备份

    一.前言 本文主要介绍 Hbase 常用的三种简单的容灾备份方案,即CopyTable.Export/Import.Snapshot.分别介绍如下: 二.CopyTable 2.1 简介 CopyTa ...

  8. Python实用笔记 （13）函数式编程——返回函数

    函数作为返回值 我们来实现一个可变参数的求和.通常情况下,求和的函数是这样定义的: def calc_sum(*args): ax = 0 for n in args: ax = ax + n ret ...

  9. MongoDB快速入门教程 （4.4）

    4.5.Mongoose索引和方法 4.5.1.设置索引 let UserSchema = mongoose.Schema({ sn: { type: Number, // 设置唯一索引 unique ...

  10. proxool配置连接池

    http://log-cd.iteye.com/blog/199482 1.Hiebernate配置文件中引用proxool配置文件: <hibernate-configuration> ...