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. （十）深入理解maven构建生命周期和各种plugin插件

    链接:https://blog.csdn.net/zhaojianting/article/details/80321488

  2. C# 9.0 新特性之目标类型推导 new 表达式

    阅读本文大概需要 2 分钟. 呼~~,每次过完一个周末,写作就失去了动力,一两天才能缓过来.尽管如此,还是要坚持写好每一篇文章的.宁缺毋滥嘛,宁愿发文的频率低一点,也要保证文章的质量,至少排版不能差, ...

  3. 简易的phpexcel导出柱状图

      首先得把phpexcel扩展的源码拷贝到项目文件下 下面是代码   /** 引入最重要的PHPExcel类库的入口文件 */ require(STK_PATH.'/class/stk/PHPExc ...

  4. cb47a_c++_STL_算法_排列组合next_prev_permutation

    cb47a_c++_STL_算法_排列组合next_prev_permutation 使用前必须先排序.必须是 1,2,3或者3,2,1.否者结果不准确.如果, 1,2,4,6.这样数据不会准确nex ...

  5. Mac上使用brew另装ruby和gem的新玩法

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 众所周知,Mac ...

  6. Python 简明教程 --- 8，Python 字符串函数

    微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 好代码本身就是最好的文档.当你需要添加一个注释时,你应该考虑如何修改代码才能不需要注释. -- St ...

  7. 入门大数据---Spark累加器与广播变量

    一.简介 在 Spark 中,提供了两种类型的共享变量:累加器 (accumulator) 与广播变量 (broadcast variable): 累加器:用来对信息进行聚合,主要用于累计计数等场景: ...

  8. Eclipse中Debug时鼠标悬停不能查看变量值解决办法

    问题描述:Eclipse在Debug模式下,当鼠标移动到某个变量上面时不自动显示该变量对应的值. 解决方法:在Eclipse中点击 Window->Preferences->Java-&g ...

  9. Redis系列（九）：数据结构Hash源码解析和HSET、HGET命令

    2.源码解析 1.相关命令如下: {"hset",hsetCommand,,"wmF",,NULL,,,,,}, {"hsetnx",hse ...

  10. 用户不在sudoers文件中怎么办，ziheng is not in the sudoers file解决方法

    sudo是linux系统中,用来执行需要权限命令,但是一些朋友使用sudo时,出现下面的错误“ziheng is not in the sudoers file. This incident will ...