【JAVA笔记】CSS

CSS

1.CSS四种样式

内部

	<!--
	<style>
	h1{
	color:red;
	}
	</style>
	-->

外联，链接式

• <linkrel="stylesheet"href="CSS/style.css">

行内

• <h1style="color:green">Helloworld</h1> 

外部导入式

 <style>
        @import url("CSS/style.css");
 </style>

2.选择器

• 标签选择器

h1{
    color:#123414;
}

• 类选择器

.qin{
    color:red;
}
<h1class="qin">Helloworld</h1>

• ID选择器

#qin{
    color:red;
}
<h1id="qin">Helloworld</h1>

• 优先级

优先级 ID>类>标签

3.层级选择器

• 后代选择器

/*body后面的背景更改*/
body p{
    background:red;
}

• 子选择器

/*body后面第一代p更改 */
body>p{
    background:red;
}

• 相邻兄弟选择器

/*类相邻（后面）只有一个 */
.active +p{
    background:red;
}

• 通用选择器

/*通用兄弟选择器，当前选中元素的所有兄弟元素*/
.active~P{
    background:red;
}

4 结构伪类选择器

• 伪类： 过滤的条件

• ul第一个子元素和最后一个子元素

<style>
ul li:first-child{
	background:red;
}
ul li:last-child{
	background:red;
}
</style>

• 选中p：定位到父元素，选择当前的第一个元素

/*：伪类定位到父类，选择当前第一个元素，并且是当前元素（此处为p）才生效，根据顺序来选*/
p:nth-child(1){
    background:red;
}
/*：伪类定位到父类，选择此类型的第二个元素，根据类型来选择*/
p:nth-of-type(2){
    background:red;
}
/*每一个div的input标签*/
div:nth-of-type(1) input{
    
}

5.属性选择器

• 存在id属性的元素 a[]{}

/*a标签中带有id的,正则匹配，属性名=属性值id为first的*/
a[id=first]{
    background:yellow;
}
/*=绝对等于
*=是包含这个元素
^=开头
$=结尾
*/
a[class*="links"]{
     background:yellow;
}
/*以http开头的*/
a[href^="http"]{
     background:yellow;
}
/*以http结尾的*/
a[href$="http"]{
     background:yellow;
}

文本样式

1.字体样式

font-famliy:楷体,其他英文字体;字体
font-size：em px	大小
font-weight 200 粗细
color       颜色

font：（风格）oblique （粗细）bloder （大小）12px （字体）"斜体"

2.文本样式

text-align:center 排版
line-height:300px 行高
text-indent:2em 首行缩进
text-decoration :none 下划线
vertical-align：middle 文本图片水平对齐

3.超链接伪类

a:hove{
    /*鼠标悬浮*/
    font-size：50px;
	color：green; 
}
a:active{
	/*鼠标按住为释放*/
    color：green;
}
a:visited{
	/*点击后颜色*/
}

4.列表

ul li{
    height：30px;
    list-style:none;/*无样式*/
}

5.背景图片

div{
border:1px solid red;/*大小 边框样式 颜色*/
background-image：url(".jpg")/*图片，默认平铺*/
background-repeat:repeat-x /*只水平平铺*/
background-repeat:no-repeat /*不平铺*/
background-postion:300px 200px /*位置*/
background: red url("") 270px 10px no-repeat/* 颜色 图片 图片位置 平铺方式*/
}

6.渐变

<style>
body{
    background-image:linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);
}
</style>

7.盒子模型

• 什么是盒子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ueAjtdZQ-1661180821172)(C:\Users\程速琦\AppData\Roaming\Typora\typora-user-images\image-20220222221054093.png)]

margin：外边距

padding：内边距

border：边框

• 边框

<style>
body{
	 margin:0px auto/*外边距为0，上下为0 左右自动对齐*/ 作用居中元素
     padding:0px 0 0 0;/*上下 左右*/
}
</style>
/*居中适用情况*/
margin:0 auto 块元素 ，块元素有固定宽度，并且内部元素不会自动居中，需要套一层div，div居中，

• 盒子多大

  margin+border+padding+内容宽度

8 .圆角边框和阴影

border-radius:10px;/*边框角*/
/*需要考虑宽高才能设置好一个半圆和扇形*/
box-shadow:10px 10px 1px yellow;/*盒子阴影 */

位置

• 标准文档流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hpePiqIk-1661180821173)(C:\Users\程速琦\AppData\Roaming\Typora\typora-user-images\image-20220223145603031.png)]

• 块级元素 ：独占一行

• h1-h6 p div 列表。。。
  

• 行内元素：不独占一行

• span a img strong。。。
  

• 块级元素可以包含行内元素，反之不行

1.display，在标准文档流内

block 块元素
inline 行内元素
inline-block 是块元素但可以内联，在一行
none

2.float，脱离标准文档流

/*浮动*/
float right /*左右浮动脱离文本流*/
float left

clear：both 关闭浮动，又变回块元素

3.父级边框浮动塌陷

• 浮动会使元素脱离父级边框，导致父级元素无内容塌陷

• 浮动

• clear:left 清除左侧浮动，如果左侧有就到下一行
  clear:right清除右侧浮动
  clear:both清除左右两侧浮动
  clear:none不清除浮动
  如果有浮动则到一行
  

1.解决办法

• 设置固定的父级高度

2.解决办法

• 内部设置一个空的div，清除浮动，用来撑开父级div

<div>
	<img>/*浮动元素*/
	<img>/*浮动元素*/
	<div  class="clear"><div>/*清除浮动*/
<div>
.clear{
    clear:both;
    margin:0;
    padding:0;
}

3.解决办法

• overflow

  overflow：hidden 超出部分隐藏
  overflow：socrll 超出部分形成滚动条
  

• 给父级元素添加overlow属性，因为父级元素没有高度，所以高度是由内部元素确定的

4.解决办法

• 伪类，可以避免空的div

#father：after{/*添加一个伪类，在父级元素后执行，模拟添加一个空的div*/
	content:''
    display:block;
    clear:both;
}

4.定位

• 相对定位
• 绝对定位

/*相对定位，相对于原来的位置进行定位*/
/*相对原来位置移动，原来位置保留，仍在文档流之内，不会塌陷*/
postion:relative;
top:-20px;//距离上面减少20个像素
left:-20px;//距离左面减少20个像素
bottom:-20px;
right:-20px;

/*绝对定位,没有父级元素的前提下，基于浏览器定位*/
/*父级元素存在定位，通常会相对父级定位*/
/*可以移出父级范围内？*/
position:absolute;
top:30px;//距离父级，或者浏览器顶部30px
right:-30px;

/*固定定位,位置在浏览器位置不变*/
 potion:fixed;
 right:0;

5.z-index

• 相当于图层

/*绝对定位时，会重叠*/
z-index:0;//默认为0，层级越高越在上层，最高无限

opacity：0.5;背景透明度

fiilter：alpha(opacity=50);早期透明度

动画

Canvas动画
关键帧动画
js动画，等等
多浏览器适配。
了解即可

建立博客

wordpress简洁博客模板下载 (51sjk.com)