CSS

遇见_line
111 阅读6分钟

css

css语法

<style>
	选择器{
		声明1；
		声明2；
	}
</style>

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

推荐将结构和样式分开即

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- href指向样式表style.css -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>标题</h1>
</body>
</html>

style.css
h1{
    color: red;
}

css 优点

内容和表现分离

网页结构表现统一，可以实现复用

样式十分丰富

建立使用独立于html的css文件

利用seo，容易被搜索引擎收录

vue 很难被收录

css导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  内部样式  -->
    <style>
        h1{
            color: red;
            size: A4;
        }
    </style>
<!--   外部样式 连接式 推荐使用 先渲染再导入-->
    <link rel="stylesheet" href="style.css">
<!--   外部样式 导入式 css2.1特有 先导入再渲染-->
    <style>
        @import url(style.css);
    </style>
</head>
<body>
<h1 style="color: white;size: A4">line</h1>
</body>
</html>

优先级： 就近原则

选择器

三种基本选择器

标签选择器

格式：
标签{
}

h1{
    color: #ca1dd2;
    font-size: 20px;
}

类选择器

格式：
.class的名称{

}

<style>
.classname{
    color: red;
    font-size: 15px;
}
</style>
<h1 class="classname">标签2</h1>
<h1 class="classname">标签3</h1>
<!--类可以是一组 -->

id选择器

格式：
#id{

}

<style>
    #idonly{
        color: green;
        font-size: 10px;
    }
</style>
<h1 id="idonly">标签4</h1>
<!--id 全局唯一-->

优先级

<h1 class="classname">标签5</h1>
<h1 id="idonly">标签6</h1>
<h1 id="id2" class="classname">标签7</h1>

标签选择器<class<id

层次选择器

后代代选择器

/*后代选择器 祖爷爷 爷爷 爸爸 你*/
        祖爷爷之后的所有p后代的样式都被修改
        body p{
            background: #ca1dd2;
        }

子代选择器

    /* 子代选择器 一代 只有爷爷层次的p会被修改*/
        body>p{
             background: aqua;
         }
    所在元素不会被修改

相邻兄弟选择器（向下）

/*相邻兄弟选择器 向下选择 同一层次向下的第一个p元素被修改*/
        .classname+p{
              background: green;
          }
.classname 所在的元素本身不会被修改

结构 伪类选择器

伪类：条件

/*a链接伪类*/
 		a{
            color:#0000;
        	}
/*鼠标悬停状态*/
        a:hover{
            color:orange;
        }
/*鼠标按住未释放状态*/
        a:active{
            color: green;
        }
/*未访问链接*/
		a:link{
            
        }
/*已访问链接*/
        a:visited{
            
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul 的第一个子元素*/
        ul li:first-child{
            background: yellow;
        }
        /*ul 的最后一个子元素*/
        ul li p:last-child{
            background: blue;
        }
        /*父类型 的第 n个 p元素*/
        p:nth-of-type(2){
            background: red;
        }
        /*父类型的第 n个子元素 且必须是当前元素才生效*/
        p:nth-child(2){
            background: blue;
        }
    </style>
</head>
<body>
<h1>H1</h1>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
    <li>l4</li>
    <li>l5</li>
    <li> li<p>o-o<a href="" >12313</a></p></li>
</ul>
</body>
</html>

属性选择器（常用）

/*a标签中带有 links的 标签 背景设为红色*/
/* = 绝对相等 *= 包含即可 ^= 以什么开头 ￥= 以结尾*/
/*属性名：属性名=属性值（正则） */
a[class="links"]{
    background=red;
}
a[herf^=http]{
    
}

美化网页

span 把要重点突出的内容用span套起来

字体

font-family: 字体
font-size 字体大小
font-weight 字体粗细
color ：颜色
可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
body{
            font-family: "Adobe Caslon Pro",楷体;
            font-size:50px;
            font-weight:bold;

        }
p{
    font:50px 楷体;
}

文本样式

/*
color
rgb 0~f
rgba  a透明度： 0~1
*/
text-align：排版 居中center靠右right 靠左 left
text-indent：首行缩进 2em 2格
line-height:行高 行高和块高一致时就可以上下居中
text-decoration: underline; 下划线
text-decoration: line-through ;中划线
text-decoration: overline;上划线
text-shadow: #ff32df 10px 10px 2px;阴影颜色 水平偏移 垂直偏移 阴影半径

列表样式

list-style:none 列表样式，none为空 去除小圆点

背景

div{
    background-image=url();/*已图片为背景*/
    background-repeat:repeat-x;/*设置背景方式 默认平铺*/
}

盒子模型

margin：外边距

padding：内边距

border：边框

border：1px solid red(粗细 样式 颜色)

input nth of type（1） 所有input类型的父类下的第一个input类型

margin:0 0 0 0
       上下左右
padding：0 0 0 0
		上下左右

display

inline ：行内元素

block：块级元素

inline-block：即使块级元素又是行内元素，通常对行内元素使用

float

使用float属性后，其他block盒子会无视float盒子进行布局

但其他盒子的inline和inline-block元素依旧会为这个float盒子让位

clear both 顶在浮动盒子的下方

父级框架塌陷

元素设置浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况）就会发生塌陷

解决方案

  1. 增加父级元素高度

​ 简单，元素假设没有了固定高度，就会被限制

  1. 增加一个空的div标签，然后清除浮动clear： both

    简单，代码中尽量避免空div

  2. 给父级框架设置overflow

overflow: hidden

简单，下拉的一些场景避免使用

  1. 父类添加一个伪类 after(推荐)
#father:after{
    content:""
    display: block
    clear:both
}

对比

display

方向不可控

float

脱离标准文档流，要解决父级塌陷

相对定位

position:relative
相对于原来的位置进行指定距离的偏移，仍然处于标准文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #father{
        margin: 0;
        padding: 0;
        height: 400px;
        width: 400px;

    }
    a{
        margin: 0;
        padding: 0;
        border: 2px dashed;
        height: 100px;
        width: 100px;
        display: inline-block;
        background-color: #ff32df;
        text-decoration: none;
        text-align: center;
        line-height: 100px;
    }
    a:hover{
        background-color: blue;
    }
    #a2{
        position: relative;
        right: -105px;
    }
    #a3{
        position: relative;
        left: -217px;
        top: 204px;
    }
    #a4{
        position: relative;
        right: -213px;
        top: 104px;
    }

</style>
<body>
<div id="father">
    <a href="#" id="a1">链接1</a>
    <a href="#" id="a2">链接2</a>
    <a href="#" id="a3">链接3</a>
    <a href="#" id="a4">链接4</a>
    <a href="#" id="a5">链接5</a>

</div>

</body>
</html>

image-20201016215726044

绝对定位

基于xxx定位

  1. 没有父级元素定位的前提下相对于浏览器的初始状态定位
  2. 有父级元素定位，通常相对于父级元素定位
  3. 在父级元素范围内移动

绝对定位不在标准文档流中，原来的位置不被保存

固定定位 fixed

定死在浏览器的某个位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{

        height: 1000px;
        background-color: #a3a3ee;
    }
    div:nth-of-type(1){
        /*绝对定位*/
        height: 200px;
        width: 200px;
        position: absolute;
        right: 0;
        bottom: 0px;
        background-color: red;
    }
    div:nth-of-type(2){
        height: 100px;
        width: 100px;
        position: fixed;
        right: 0;
        bottom: 0;
        background-color: green;
    }
</style>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

image-20201017163458713

z-index

图层 默认0最高无限

opacity 透明度

取值0~1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="scc.css">
<body>
<div>
    <ul>
        <li><img src="images/image-20201017165738603.png" alt=""></li>
        <li>hello word</li>
        <li> </li>
    </ul>
</div>
</body>
</html>

div{
    margin: 0px;
    padding: 0px;
    width: 509px;
    border: 2px red solid;
}
ul,li{
    margin: 0px;
    padding: 0px;
    font-size: 25px;
    list-style: none;

}
ul{
    position: relative;
}
li:nth-of-type(2){
    color: white;
    width: 300px;
    position: absolute;
    top: 321px;
    background: black;
    z-index: 1;
    opacity: 0.5;
}
li:nth-of-type(3){
    width: 300px;
    height: 25px;
    position: absolute;
    top: 321px;
    background: black;
}

CSS

background-position

background-position属性设置背景图像的起始位置。

注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）“

将图片在元素中移动

可以用来显示图片的某一部分

opacity

opacity 透明度 0~1 （1：完全不透明）

transition

transition-property指定CSS属性的name，transition效果
transition-durationtransition效果需要指定多少秒或毫秒才能完成
transition-timing-function指定transition效果的转速曲线
transition-delay定义transition效果开始的时候

@keyframes

使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同

使用animation属性来控制动画的外观，还使用选择器绑定动画。

语法：@keyframes animationname {keyframes-selector {css-styles;}}

margin

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

margin:10px 5px 15px 20px;

  • 上边距是 10px
  • 右边距是 5px
  • 下边距是 15px
  • 左边距是 20px

JavaScript

setInterval

setInterval(function（）{}，time) 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

querySelector

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

avatar
文章
阅读
粉丝