css

css

css的三种引入方式

1. 行内式
	<p style="color: red">Hello world.</p>
2. 内部式
	<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p{
                background-color: #2b99ff;
            }
        </style>
    </head>
3. 外部式
	<link rel="stylesheet" href="css文件名">

css选择器

基本选择器

  • 元素选择器

    语法：
	标签 {}
eg：
	p {color: "red";}

  • id选择器

    语法：
	#d1{}
eg:
    #d1 {
  	background-color: red;
	}

  • 类选择器

    语法：
	.c1{}
eg:
    .c1 {
  font-size: 14px;
    }
    p.c1 {
      color: red;
    }

  • 通用选择器

    * {
  color: white;
}
组合选择器

  • 后代选择器

    /*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

  • 儿子选择器

    /*选择所有父级是 <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;
}
属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}
伪类选择器
/* 未访问的链接  默认 */a:link {  color: #FF0000}/* 鼠标移动到链接上 */a:hover {  color: #FF00FF} /* 鼠标点击左键不放时，触发 */ a:active {  color: #0000FF}/* 已访问的链接 */a:visited {  color: #00FF00} /*input输入框获取焦点时样式*/input:focus {  outline: none;  background-color: #eee;}
伪元素选择器

  • first-letter

    p:first-letter {    /* 改变p里面文本的第一个字 */  font-size: 48px;  color: red;}

  • before

    /*在每个<p>元素之前插入内容*/p:before {  content: 'qwe';  color:red;}

  • after

    /*在每个<p>元素之后插入内容*/
p:after {
  content:"qwe";
  color:blue;
}

    ps: before和after多用于清除浮动

选择器的优先级

1. 选择器相同的情况下
	距离谁越近就听谁的
2. 选择器不同的情况下
	行内式> id> class> 标签

字体属性

font-size: 字体大小
font-family: 字体样式
font-weight: 字重(粗细)
    bold: 粗体
    bolder：更粗
    lighter：更细
    100-900：设置具体粗细
color： 字体颜色
	1. 十六进制
    2.  rgb
    3.  颜色英文单词
    rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
 text-align: 对齐方式
    left： 左对齐，默认
    right：右对齐
    center：居中对齐
    justify：两端对齐
 text-decoration: 文字装饰
    none： 没有样式，， 用来去掉a标签自带的下划线
    underline: 下划线
    overline: 上划线
    line-through: 删除线
 text-indent: 首行缩进

背景属性

背景颜色：
	background-color
背景图片：
	background-image
背景重复(我们浏览器可以看是一个三维)
	background-repeat:属性值
	repeat(默认)：   背景图片铺满整个网页
    repeat-x:        水平方向平铺
    repeat-y:        竖直方向平铺
    no-repeat:       背景图片不平铺
背景位置：
	background-position:  
    background-position: 100px 100px;
        
 简写：
	background: #FFFFFF url('') no-repeat 位置属性;
 固定背景图片：
	background-attachment: fixed;

边框

边框属性：
	border-width
    border-style
    border-color
简写：
	border: 2px solid red;
边框样式：
	none      无边框
    dotted    点状虚线
    dashed    矩形虚线边框
    solid     实线边框
圆形：
	border-radius： 50%
    长高相等则是圆，负责是椭圆

display属性：

block:  让其具有块级元素的特点
inline： 让其具有行内元素的特点
inline-block: 让其具有行捏元素和块级元素的特点
    
display:none
    可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
visibility:hidden
    可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

css盒子模型

margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding:           用于控制内容与边框之间的距离；   
Border(边框):     围绕在内边距和内容外的边框。
Content(内容):   盒子的内容，显示文本和图像。
    

margin和padding
	"""
	提供一个，用于四边；
    提供两个，第一个用于上－下，第二个用于左－右；
    如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
    提供四个参数值，将按上－右－下－左的顺序作用于四边；
    
    .margin-test {
          margin: 5px 10px 15px 20px;
        }

.padding-test {
      padding: 5px 10px 15px 20px;
    }
	"""
    
常见居中：
	margin： 0 auto

float

left:  向左浮动
right: 向右浮动
none： 默认值，不浮动

clear

both:         左右两侧不允许浮动
none：        允许浮动

清除浮动

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

溢出属性

overflow

属性：
	visible： 默认值
    hidden：  内容会被修剪，并且其余内容是不可见的。
    scroll：  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto：    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 200px;
        border: 2px solid black;
        overflow: hidden;
        margin: 0 auto;
        border-radius: 50%;
    }
    img{
        height: 100%;
    }
</style>


<div>
    <img src="../2.png" alt="">
</div>
</body>
</html>

定位

定位：
    1. 静态
    2. 相对定位   relative
        相对于原来的位置定位
    3. 绝对定位   absolute
        相对于父标签定位, 如果没有父标签，相对于body
    4. 固定定位     fixed
        相对于浏览器窗口
        
 # 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<style>
    #d1{
        width: 200px;
        height: 200px;
        background: aqua;
        position: relative;
    }
    #d2{
        width: 200px;
        height: 200px;
        background: darkgray;
        position: relative;
        left: 100px;
        bottom: 100px;
    }
</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

# 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<style>
    #d1{
        width: 200px;
        height: 200px;
        background: aqua;
    }
    #d2{
        width: 200px;
        height: 200px;
        background: darkgray;
        position: absolute;
        left: 100px;
        top: 100px;
    }
</style>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>
</html>


# 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<style>
    #d1{
        width: 100%;
        height: 1000px;
        background: aqua;
    }
    #d2{
        width: 100%;
        height: 1000px;
        background: darkgray;
    }
    #d3{
        width: 100%;
        height: 1000px;
        background: palegreen;
    }
    #d4{
        width: 50px;
        height: 50px;
        background: darksalmon;
        border: 2px solid black;
        text-underline: none;
        position: fixed;   <!-- 固定定位 -->
        right: 25px;
        top: 400px;
    }

</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4">
    <a href="#d1">点击回到顶部</a>
</div>
</body>
</html>

z-index

eg:  百度的登录页面
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<style>
    #d1{
        width: 100%;
        height: 900px;
        border: 3px solid black;
        overflow: hidden;
    }
    #d1 img{
        width: 100%;
    }
    #d2{
        background: grey;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        opacity: 70%;
        z-index: 99;
    }
    #d3{
        background: white;
        border: 1px solid black;
        width: 200px;
        height: 200px;
        z-index: 100;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
</style>


<div id="d1">
    <img src="../2.png" alt="">
</div>
<div id="d2"></div>
<div id="d3">
    <p>username: <input type="text"></p>
    <p>password: <input type="text"></p>
    <button>提交</button>
</div>
</body>
</html>

opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

posted @ 2021-08-03 20:00  剧终cur  阅读(33)  评论(0)    收藏  举报