前端之css_移动小怪兽css怎么敲-CSDN博客

本文链接：https://blog.csdn.net/weixin_40782004/article/details/89004455

CSS：

层叠样式表，用来设置标签样式的

注释：

/*单行注释*/

多行注释

语法结构：

选择器{属性:样式；属性：样式；属性：样式;}

三种引入css样式的方式：

head内style标签内直接写css (内部样式)

<head>

<title>Title</title>

<style>

background-color: gray;

}

</style>

</head>

head内link标签引入外部css样式(外部样式)

标签内直接写style直接写style属性来调整样式 (行内式)

<p style="color: red">这是一个行内式</p>

通常标签应该有的属性：

id属性，唯一标识某一个标签

name，主要用于和用户打交道

任何标签都可以自定义属性

class后面可以有多个值，类似于面向对象的继承

基本选择器：

元素选择器

span{color: red}

id选择器

#i1{color: gold}

类选择器

.c1{color: green}

通用选择器

*{color: green}

注意:

样式类名不要用数字开头

标签中的class如果有多个,要用空格隔开

组合选择器：

后代选择器

标签空格标签{},特点是空格

div内的所有div设置字体颜色

div div{

color: gold;

}

儿子选择器

标签>标签{}，特点是>，只能用于直接的子父标签

/*选择所有父级是 <div> 元素的 <p> 元素*/

div>p {

font-family: "Arial Black", arial-black, cursive;

}

毗邻选择器

标签+标签，第一个标签的下一个的第一个标签

/*选择所有紧接着<div>元素之后的<p>元素*/

div+p {

margin: 5px;

}

弟弟选择器

标签~标签，标签下面的所有标签

/*i1后面所有的兄弟p标签*/

#i1~p {

border: 2px solid royalblue;

}

属性选择器：

具有某个属性的标签

具有某个属性并且值为xxx的标签

具有某个属性并且值为xxx的某个值

[属性名]{}

[属性名+条件]{}

标签名[属性]{}

span[xxx="1"]{

font-size: 24px;

}

分组和嵌套：

标签,标签,标签{}

不同的标签使用相同的样式

分组

p,span{

font-size: 23px;

}

嵌套 .c1内部所有p标签为红色

.c1 p {

color: red;

}

伪类选择器：

a:link{}一开始

a:hover{}放上去

a:active{}点击时

a:visited{}点击后

/* 未访问的链接 */

a:link {

color: #FF0000

}

/* 已访问的链接 */

a:visited {

color: #00FF00

}

/* 鼠标移动到链接上 */

a:hover {

color: #FF00FF

}

/* 选定的链接 */

a:active {

color: #0000FF

}

伪元素选择器：

通过css添加内容

before 前面加文本

after 后面加文本

first-letter 改变第一个字

p:first-letter{

font-size: 48px;

color: red;

}

p:before{

content: "*";

color: gold;

}

p:after{

content: "!";

color: red;

}

选择器优先级：

选择器相同情况下,谁离标签近谁主导

选择器不能的情况下

行内选择器>Id选择器>类选择器>元素选择器

(行内选择器权重1000,id选择器100,类选择器10,元素选择器1)

快捷写法

利用css设置标签样式

标签长宽:

width设置宽度 height设置高度块级标签才能设置宽度行内标签的宽度由内容决定

字体属性:

文字字体

文字大小 font-size

文字粗细 font-weight

字体

body {

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

}

大小

p {

font-size: 14px;

}

粗细

font-weight:normal;

}

文字颜色:

十六进制:#FF0000

一个RGB值:RBG(255,0,0)

Reba(255,0,0,0.4)

颜色的名字 color red;

文字属性:

文字居中对齐 text-align:center

文字装饰

text-decoration:none

(去掉a标签的下划线)

首行缩进

p {

text-indent: 32px;

}

背景属性

/*背景颜色*/

background-color: red;

/*背景图片*/

background-image: url('1.jpg');

背景重复

repeat(默认):背景图片平铺排满整个网页

repeat-x：背景图片只在水平方向上平铺

repeat-y：背景图片只在垂直方向上平铺

no-repeat：背景图片不平铺

background-repeat: no-repeat;

/*背景位置*/

background-position: left top;

/*background-position: 200px 200px;*/

/*图片不动,固定*/

background-attachment: fixed;

边框:

简写border三合一样式颜色粗细

div{border:solid red 3px}

border-radius画圆

#i1 {

border-width: 2px;

border-style: solid;

border-color: red;

}

#i1 {

border: 2px solid red;

}

画圆

#l3{

background-color: gold;

width: 100px;

height: 100px;

border: 3px red solid;

border-radius: 50%;

}

display属性****

none 能过隐藏标签并且不占据文档空间

block 把一个行内标签变成块级标签

inline 把一个块级标签编程行内标签

Inline-block 既有行内标签的特点又有块级标签的特点

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

Css盒子模型:

Margin 外间距简写上右下左 (调整标签与标签之间距离的)

居中 magrin:0 auto;

.margin-test {

margin-top:5px;

margin-right:10px;

margin-bottom:15px;

margin-left:20px;

}

推荐

.padding-test {

padding: 5px 10px 15px 20px;

}

顺序上右下左顺时针

浮动:

float:left , float:right

浮动带来的影响:

浮动的元素脱离文档流造成父级标签塌陷

.c1{

width: 100px;

height: 100px;

background-color: red;

float: left;

}

.c2{

width: 100px;

height: 100px;

background-color: gold;

float: left;

}

clear:

清除浮动的副作用（父标签塌陷问题）

伪元素清除法（使用较多）

.clearfix:after {

content: "";

display: block;

clear: both;

}

overflow:

溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

* overflow（水平和垂直均设置）

* overflow-x（设置水平方向）

* overflow-y（设置垂直方向）

定位:

相对定位:相对于标签本身原来的位置relative

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

绝对定位:相对于已经定位过的父标签 absolute

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

固定定位:定位在某个位置,保持不动 fixed

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

是否脱离文档流:

脱离文档流

浮动的元素

绝对定位

固定定位

不脱离文档流

相对定位

z-index:(模态框)

#i2 {

z-index: 999;

}