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. （七）四种常见的post请求中的参数形式

    原文链接:https://blog.csdn.net/jiadajing267/article/details/87883725 1).HTTP 协议是以 ASCII 码 传输,建立在 TCP/IP ...

  2. idea出现 淇℃伅 乱码

    问题:我是idea出现 淇℃伅 乱码, 解决:修改 tomcat 下的 logging.properties这个文件 为 GBK 就好了. 参考:https://blog.csdn.net/weixi ...

  3. MyBatis 实体类属性与表字段不一致

    原文链接:https://blog.csdn.net/zx48822821/java/article/details/79050735 因为数据库一般设置为表的字段不区分大小写,所以数据库中表的字段通 ...

  4. Dubbo——服务引用

    文章目录 引言 正文 服务订阅 Invoker的创建 单注册中心的Invoker创建 Dubbo直连的Invoker创建 创建代理类 引言 上一篇我们分析了服务发布的原理,可以看到默认是创建了一个Ne ...

  5. AWS 错误标记3

    1. What is the average queue length recommended by AWS to achieve a lower latency for the 200 PIOPS ...

  6. shellcode 免杀(一)

    工具免杀 选择了几个简单或者近期还有更新的免杀工具进行学习 ShellcodeWrapper https://github.com/Arno0x/ShellcodeWrapper 该工具的原理是使用异 ...

  7. Stream替代for-编码五分钟-划水五小时

    Stream替代for-编码五分钟-划水五小时 天空没有痕迹,风雨已在心中. 背景:使用Stream 流式操作取代俄罗斯式套娃的for循环,解放底层劳动密集型码畜的双手,使编码五分钟划水五小时,不再是 ...

  8. 使用 Masstransit中的 Request/Response 与 Courier 功能实现最终一致性

    简介 目前的.net 生态中,最终一致性组件的选择一直是一个问题.本地事务表(cap)需要在每个服务的数据库中插入消息表,而且做不了此类事务 比如:创建订单需要 余额满足+库存满足,库存和余额处于两个 ...

  9. Zookeeper分布式过程协同技术 - 群首选举

    Zookeeper分布式过程协同技术 - 群首选举 群首概念 群首为集群中服务器选择出来的一个服务器,并被集群认可.设置群首目的在与对客户端所发起的状态变更请求进行排序,包括:create.setDa ...

  10. 2020-06-30 pol实现execl导入导出

    1.导入依赖 <!-- 解析表格 --> <dependency> <groupId>org.apache.poi</groupId> <arti ...