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. GetLastError返回值含义

    GetLastError的返回值的含义: (0)-操作成功完成. (1)-功能错误. (2)- 系统找不到指定的文件. (3)-系统找不到指定的路径. (4)-系统无法打开文件. (5)-拒绝访问. ...

  2. ida 调试android之路

    系统: Mac OSX 调试环境:IDA7.0,  adb 手机环境:红米手机 android 4.4.4 前提条件: 红米手机root之路:https://www.cnblogs.com/dzqdz ...

  3. 关于margin外边距合并的问题

    一 .兄弟元素margin外边距合并演示   当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. ...

  4. Beta 冲刺

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta 冲刺 这个作业的目标 Beta 冲刺 汇总博客 作业正文 如下 其他参考文献 ... 说明:此博客 ...

  5. 天津开发票/v电13543443967

    关于事项:Iㄋ5一★4З44一★ㄋ9.б7开发票的准备资料必须要公司名称个人的话就用个人名字和身份证去税务柜台申请办理!公司的话要提供公司全称就是营业执照上的名称,纳税人税号,如果是开普通增值税发票的 ...

  6. python之单元测试及unittest框架的使用

    例题取用登录模块:代码如下 def login_check(username,password): ''' 登录校验的函数 :param username:账号 :param password: 密码 ...

  7. Elastic认证考试，请先看这一篇

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/wojiushiwo987/article ...

  8. LQR算法如何跟随变化的期望状态

    开门见山,通过LQR的能量函数可以看出,LQR算法是将状态量控制到零(关于能量函数请看我的随笔:LQR要点),但实际控制中我们希望状态量能够跟随期望值 下面将会解决如何用LQR算法跟随变化的期望值: ...

  9. Python实用笔记 （1）字符串与编码

    历史:Ascll-Unicode-UTF-8 对于单个字符的编码,Python提供了ord()函数获取字符的整数表示,chr()函数把编码转换为对应的字符: >>> ord('A') ...

  10. 消息总线（Bus）

    Spring Cloud Bus将分布式系统的节点与轻量级消息代理链接.可以用于通知状态更改(例如配置更改)或其他管理指令.一个关键的地方是,Bus就像一个分布式执行器,用于扩展的Spring Boo ...