CSS样式

CSS样式

一.全局样式设计

外部样式引入

<link rel="stylesheet" href="../外部样式.css">

全局通用样式

* {
      padding: 0px;
      margin: 0px;
      list-style: none;
      font-style: normal;
      font-size: 12px;
 
}
 
 a {
         text-decoration: none;
		}

全局常用样式

/* 设置边框颜色 */
.red {
    border: 1px solid red;
}
.blue {
    border: 1px solid blue;
}
.black {
    border: 1px solid black;
}
.yellow {
    border: 1px solid yellow;
}
.flex {
    display: flex;
    flex-direction: row;
    /* 设置flex布局 布局的排列方向为横向 */
}

.j_s_a {
    justify-content: space-around;
    /* 项目位于各行之前、之间、之后都留有空白的容器内。 */
}

.j_s_b {
    word-wrap: wrap;
    justify-content: space-between;
    /* 项目位于各行之间留有空白的容器内。 */
}

.b_s {
    box-sizing: border-box;
    /* 设置box的尺寸为边框限制的尺寸 */
}

.j_c {
    justify-content: center;

    /* 项目位于容器的中心。 */
}
.j_s{
    justify-content: start;
    /* 设置项目从开始方向排列。 */
}
.a_c {
    text-align: center;
    /* 文字居中 */
}
.container {
    width: 1226px;
    margin: 0 auto 0;

}

常用的文字样式

​ 设置字体 font-family

​ 设置斜体 font-style：italic；

​ 设置字体粗细 font-weight: lighter;\bold;\ bolder;\100-900;

​ 设置文本的行高 line-height: 30px;

​ 设置文本的颜色 color:#00ff00;

​ 字体换行 word-wrap: break-word;

​ 指定段字之间的空间 word-spacing:30px;

​ 设置文本缩进 text-indent:30px;

​ 设置文字的线为无样式 text-decoration: none;
​ 设置文字的线为下划线 text-decoration: underline;
​ 设置文字的线为上划线 text-decoration: overline;
​ 设置文字的线为穿过文本的线\ text-decoration: line-through;

​ 设置盒子阴影 text-shadow: 5px 5px 5px #FF0000;

​ 添加滚动条 overflow: scroll;
​ 根据实际情况，添加滚动条 overflow: auto;

常用的鼠标指针样式

​ 鼠标光标为默认样式：箭头 cursor: default;
​ 鼠标光标在p上的时候设置为移动 cursor: move;
​ 鼠标光标在p上的时候设置为小手 cursor: pointer;

常用的图片样式

​ 插入图片 background-image: url("./img/123.jpg");

​ 设置页面背景颜色 background-color: pink;

​ background-size: 1000px 1000px; 分别设置图片的宽和高

​ 设置图片的x y轴 background-position: X Y;

​ 设置图片自动贴合背景大小 background-size: cover;

​ 设置背景图片不重复的 background-repeat: no-repeat;

​ 设置背景图片大小 background-size:80px 60px;

​ 设置背景图像的相对位置的内容框 background-origin:content-box;

​ 背景剪裁属性是从指定位置开始绘制 background-clip

​ 调节图片后的文字位置
​ （底部） vertical-align: bottom;
​ （顶部）vertical-align: top;
​ （中间） vertical-align: middle;

常用的边框和边距样式

​ 指定每个圆角 border-radius: 15px 50px 30px 5px:

​ 设置边框属性 border:2px solid #a1a1a1;

​ 设置外边距属性 Margin: 10px 10px 10px auto；

​ 设置外边距属性 Margin: 上 右 下 左：自动；

​ 设置内边距属性 Margin: 10px 10px 10px 20%；

​ 设置内边距属性 padding: 上 右 下 左：20%；

​ 利用边框画三角形： .delta {
​ background-color: transparent;
​ border-width: 10px;
​ border: tomato solid 100px;

​ border-color: red transparent yellow transparent; (transoarent 透明色)

​ width: 0px;
​ height: 0px;

​ }

​ 画四分之圆如何画
​ .banyuan1 {
​ background-color: red;
​ border: tomato solid;
​ width: 100px;
​ height: 100px;
​ border-radius: 100px 00px 0px 00px;

​ }

常用的伪类

​ a的链接属性

​ /* 未访问的链接 / a:link {color:#FF0000;}
​ / 已访问的链接 / a:visited {color:#00FF00;}
​ / 鼠标划过链接 / a:hover {color:#FF00FF;}
​ / 已选中的链接 */ a:active {color:#0000FF;}

​ 选择元素输入后具有焦点 input:focus

​ 选择每个

元素的第一个字母 p:first-letter

​ 选择每个

元素的第一行 p:first-line

​ 在每个

元素之前插入内容 p:before

​ 在每个

元素之后插入内容 p:after

​ 子代选择器 outer>p 直接选择outer中的一个叫p的元素

​ 后代选择器 outer p 选择outer中所有的p元素

​ 选择第一个标签 在大类之中 div p:first-of-type {color: hotpink;}
​ 选择最后一个标签 在大类之中 div p:last-of-type {color: hotpink;}
​ 选择第n个标签 在大类之中 div p:nth-of-type(3) {color: gainsboro; }

​ 否定选择器 div p:not(.fouding){ }

​ 交集选择器 div.p{ }

​ 并集选择器 div，p,h1,h2{ }

​ 属性选择器 [title~=hello] { color:blue; }

​ /*超出部分添加省略号 */

​ overflow: hidden;

​ text-overflow: ellipsis;

​ white-space: normal;

常用的定位和浮动

定位分三种：1.绝对定位 2.相对定位 3. 固定定位

1. 绝对定位 （相对于自己定位 脱离文档流 根据父代的绝对定位来对自己定位（如果父代没有相对就根据浏览器相对））

   h2
   {
   position:absolute;
   left:100px;
   top:150px;
   }
   

2. 相对定位 （相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。）

   h2.pos_left
   {
   position:relative;
   left:-20px;
   }
   h2.pos_right
   {
   position:relative;
   left:20px;
   }
   

3. 固定定位 （元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：）

   p.pos_fixed
   {
   position:fixed;
   top:30px;
   right:5px;
   }
   

4. 绝对轴定位 （指定了一个元素的堆叠顺序 数字越高，文件位置越靠上）

   img
   {
   position:absolute;
   left:0px;
   top:0px;
   z-index:1;
   }
   

浮动 （元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。）

浮动之后文字将脱离文档流 如果相邻相仿的元素一起浮动，就会导致他们彼此相邻

1. 向左浮动 float:left;
2. 向右浮动 float:right;
3. 清除浮动 clear:both;