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. 从零开始的Spring Boot(2、在Spring Boot中整合Servlet、Filter、Listener的方式)

    在Spring Boot中整合Servlet.Filter.Listener的方式 写在前面 从零开始的Spring Boot(1.搭建一个Spring Boot项目Hello World):http ...

  2. RFID-RC522 模块的读写操作【Arduino】

    接线 Arduino Uno <-> RFID-RC52210 <-> SDA13 <-> SCK11 <-> MOSI12 <-> MIS ...

  3. JavaSE之流程控制结构

    流程控制语句结构 一.顺序结构 public static void main(String[] args){     //顺序执行,根据编写的顺序,从上到下运行     System.out.pri ...

  4. Beta冲刺--项目测试

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

  5. nmap二层发现

    使用nmap进行arp扫描要使用一个参数:-sn,该参数表明屏蔽端口扫描而只进行arp扫描. nmap支持ip段扫描,命令:nmap -sn 192.168.1.0/24 nmap速度比arping快 ...

  6. mysql8.0 解决时区问题

    jdbc:mysql://localhost:3306/databaseName?useUnicode=true&characterEncoding=UTF-8&useOldAlias ...

  7. 04[掌握] Java连接redis操作

    1,Jedis所需要的jar包依赖 <dependency> <groupId>redis.clients</groupId> <artifactId> ...

  8. ajax前后端交互原理（2）

    2.NPM使用 2.1.NPM是什么 NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,这里要搞清楚包的概念,通俗的说,包就是具有一定功能的工具(软件),本质 ...

  9. 关于阿里云服务器Linux安装Tomcat后，外网不能访问解决方案

    这里需要提及三个方面的问题   第一个方面:Linux上启动防火墙的问题 当下比较流行的Linux镜像是CentOS,所以防火墙也随之变成了firewall,那么怎么操作这个防火墙呢?   #停止fi ...

  10. python之re模块（正则表达式）

    正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. re 模块使 Python 语言拥有全部的正则表达式功能. 正则表达式中,普通字符匹配本身,非打印字符\n .\t等 ...