首页 > 编程语言 >Java CSS3

Java CSS3

时间:2023-01-20 17:57:46浏览次数:52  
标签:CSS3 style Java 父级 标签 元素 边框 选择器

CSS 层叠级联样式表

快速入门

CSS可以在html文件中写,写在< style>中,一般style写在head中(HTML,CSS没有分离)

<style>
    h1(选择器){
		可以设置h1的属性(声明,分号结尾)
    }
</style>

分离:在html中使用< link>,其中的href指向css文件所在位置。分离可以实现复用

CSS3种导入方式

  1. 行内样式,在标签元素中编写一个style属性
  2. 内部样式,在style中写css
  3. 外部样式
    1. 链接式(属于html),使用link导入css文件位置
    2. 导入式(属于CSS2.1特有的):在style中使用@import url导入css文件位置(一般不用)

优先级采用就近原则,谁离元素更近就采用哪个,行内是最近的

选择器

作用:选择页面上的某一个或者某一类元素

基本选择器

  1. 标签选择器:元素+代码块。会选择到页面中的所有这个标签
  2. 类选择器:先给元素赋class属性名,使用 .类名+代码块。可以归类
  3. id选择器:先给元素赋id名,使用 #id号+代码块。id全局唯一

优先级:id选择器>class选择器>标签选择器

层次选择器

  1. 后代选择器:在某个元素后面 body(空格)p:body下面的p选择器
  2. 子选择器 一代 body>p: body的子类p,不包括p的子代
  3. 相邻(对下不对上,且只有一个)兄弟选择器:同辈 .active + p:active类这个元素周围的所有p标签
  4. 通用选择器,类似于相邻选择器,但是可以选中下面的所有。 .active~p

结构伪类选择器

ul li : 可以形成一个伪类,是ul的所有li元素。使用first-child等可以选其中的元素

first-child第一个元素

last-child最后一个元素

nth-child()如果只写li,使用这个会定位到li的父级元素ul,选择他的第x个元素,而且需要是当前元素类型才能生效

nth-of-child()上面的方法存在无法选中的情况,而这个方法是选中第x个指定类型的元素

属性选择器(常用)

.demo a+代码块:可以选中demo类下面的所有a属性的元素

a[id]+代码块:选中所有带有id属性的a标签,也可以指定属性的值;=为绝对等于,*=为包含,^=为以,,,开头,$=为以...结尾,后面的几个都是正则表达式

美化网页元素

字体

span标签用于突出文字,需要在style中写具体的内容。span只是约定俗成的规定

style中用font改字体,可以改字体样式,大小,粗细

省略的写法:font:字体风格(斜体等),粗细,大小,字体样式

文本

  1. 颜色color
  2. 对齐方式text-align,居中是center
  3. 首行缩进text-indent
  4. 背景background与height
  5. 行高line-height
  6. 装饰text-decoration
  7. 阴影text-shawdow

超链接伪类

在标签中加属性href="#"

在style中a:hover可以修改鼠标悬浮到a标签的超链接后的样式

在style中a:active可以修改鼠标按住a标签的超链接后的样式

背景

background-color/image

默认图片是平铺

快速方法:background:颜色 图片 图片位置 平铺方式

渐变www.grabient.com

盒子模型

margin外边框,跟padding一样

padding内边框,只输入一个数值就默认是全部,或者输入四个,代表上下左右。写两个,前面代表上下,后面代表左右。使用auto可以实现居中等样式

border边框 border:粗细 样式 颜色

总有一个默认的外边距0

圆角边框

border-radius。输入一个是全部角。输入两个分别是左上右下和右上左下

圆圈:圆角=半径

阴影

border-shadow

display与浮动

display可以将行内元素变为块元素等

block块元素

inline行内元素

inline-block是块元素,但是可以内联(在一行)

none消失

float浮动

clear可以使一个元素浮动的同时作为块元素(另起一行,不与其他元素浮动在一行)right:不允许右侧有浮动,both不允许两侧有浮动

父级边框塌陷的问题

由于内部元素设置为浮动(不算为边框内的内容),导致边框不能包含住那些浮动的元素。display不会导致(仍是边框内的内容),float会

解决方法

  1. 增加父级元素的高度
  2. 增加一个空的div
  3. overflow可以生成一个滚动条,如果规定的文本超出了边界,就可以出现滚动条。设置为hidden会隐藏滚动条
  4. (推荐)在父类中添加一个伪类 :after。里面content设一个空字符,display设置为block,clear设置为both

定位

相对定位

相对于自己原来的位置进行偏移

position:relative

使用top,left,right,bottom他们代表的是相对于某个方向的距离

他的原来位置仍然保留在边框中

绝对定位

基于xxx定位

原来位置不保留,可能会引起父类边框塌陷

position:absolute

如果没有父级元素定位:相对于浏览器定位

如果父级元素有定位属性,则会相对于父级元素定位。一般给父级一个空的relative定位

只能在父级元素范围内移动,虽然不在标准文档流中,偏移也是相对于原来位置,滚动浏览器位置会移动

固定定位

滚动浏览器位置不会移动,是相对于浏览器边框定位的

z-index

可以设置元素的层级,类似于ps中的图层

标签:CSS3,style,Java,父级,标签,元素,边框,选择器
From: https://www.cnblogs.com/zaughtercode/p/17062946.html

相关文章

  • java 多线程
    process进程thread线程三种创建方式Threadclass继承Thread类创建线程方式一:继承Thread类,重写run()方法,调用start开启线程(如果是直接调用run方法,实际上是在main线......
  • javaWeb
    在java中,动态web资源开发的技术统称为JavaWeb一些默认tomcat:8080mysql:3306http:80https:443默认的主机名:loaclhost->127.0.0.1默认网站应用存放的位置:webapps......
  • javaScript
    JavaScript是一门流行脚本快速入门跟css一样,可以直接写在html中,放在script标签中alert可以弹出弹窗,内容用单引号引入的时候一定要成对出现,不能自闭和基本语法入门......
  • java基础
    p460-470List类子类的底层逻辑JAVA基础快捷键ctrl+alt+L整理代码shift+F10运行ctrl+B定位找到方法ctrl+H查看一个类的层级关系ctrl+d复制当前代码项向下shift......
  • java io流
    起因:学习网编,发现里面的课程大量用到了io的知识,十分影响学习,所以转战io何为“流”流:数据在数据源(文件)和程序(内存)之间经历的路径输入流:数据从数据源(文件)到程序(内存)的路径......
  • java 多态学习笔记
    因为在想去一个家乡的小国企,每个月五六千块钱或许也不错,所以懈怠了学习。但是论语中有说:取乎其上,得乎其中;取乎其中,得乎其下;取乎其下,则无所得矣。如果我想着只是进一个小地......
  • JavaScript 中断forEach循环
    1、使用Array.prototype.some()方法代替some()方法会在找到第一个符合条件的元素时停止循环。例如:letarray=[1,2,3,4,5];array.some(function(element,inde......
  • java HTML5
    HTML超文本标记语言W3C万维网联盟W3C标准包括:结构化标准语言(HTML,XML)表现标准语言(CSS)行为标准(DOM,ECMAScropt) 网页基本信息使用<!--注释内容-->进行注释......
  • java IO流
    起因:学习网编,发现里面的课程大量用到了io的知识,十分影响学习,所以转战io何为“流”流:数据在数据源(文件)和程序(内存)之间经历的路径输入流:数据从数据源(文件)到程序(内存)的路径......
  • java CSS3
    CSS层叠级联样式表快速入门CSS可以在html文件中写,写在<style>中,一般style写在head中(HTML,CSS没有分离)<style> h1(选择器){可以设置h1的属性(声明,分号结尾)......