云计算笔记-04

权重问题

权重问题

标签选择器	0001
class选择器	0010
id选择器	0100
伪类选择器	0010
包含选择器	权重之和
属性选择器	0010（如果权重一样，下面生效，重叠性）
伪元素选择器	0001
内联样式	1000

字体相关样式

 

字体相关样式

斜体文本	font-style: italic;
加粗	font-weight: 900;
字体大小 常用	font-size: 50px;
声明字体 默认微软雅黑	font-family: "微软雅黑";

            注意每行要有分号
            连写有要求font(按照顺序)：粗细 倾斜 字号/200px（加行高） 风格 

文本相关样式

文本相关样式

段落缩进2个字符	font-size: 28; text-indent: 2em;（2em em当前字体大小）
text-align: center;	text-align: （center居中 right居右）
行高	line-height: 200px;（单行文本加一个高度实现垂直居中）

文本装饰
                         文本装饰：去除a链接默认样式    text-decoration: none;
             设置文本颜色：color: aqua;(#fff白色) 
 

文本装饰

去除a链接默认样式	text-decoration: none;
设置文本颜色	color: aqua;(#fff白色)
透明度	opacity: 0.2;（0不显示，1显示）

列表相关样式
 

列表相关样式

去除黑点（无序列表）	list-style: none;
图片作为样式	list-style-image: url(../图片/dog1.jpg);
定位	list-style-position: inside;

背景
 

背景

背景颜色	background-color: aqua;
背景图片	background-image: url(../图片/dog2.jpg);
不重复	background-repeat: no-repeat;
左上角	background-position: left top;
固定背景图	background-attachment: fixed;
强行铺满	background-size: cover;
水平居中	margin: auto ; (标签居中)

文本方向
                          从右边开始排列：direction: rtl;

隐藏元素

隐藏后空间不在	display: none;
隐藏后空间还在	visibility: hidden;
空间还在  0不显示 1显示	opacity: 1;

元素类型
 

元素类型

块元素	默认独占一行 设置宽高 设置内外边距 div h1~h6 p li
行内元素	无法直接设置宽高 内外边距 a span
行内块元素:	可以直接设置宽高 不会独占一行 img input
将其它元素转化为块元素	display: block;
将其它元素转化为行内块元素	display: inline-block;

边框
 

边框

边框的宽度	border-width: 20px;
边框的样式	border-style: double;
边框的颜色	border-color: black;
（以上三个同时设置设有效果）	border：按照上面的顺序
控制弧度	border-radius: 50%;

表格  

    cellspacing="0"   
                          <style>
        table{
            border-collapse: collapse;
             }
     td{
        width: 100px;
        height: 50px;
        text-align: center;
        border: 1px solid black;
       }
             </style>   

文本域
 

文本域

使文本域的大小固定	resize: none;
控制鼠标样式	cursor: auto;

绝对定位

子绝父相

绝对定位	position: absolute;
相对定位	position: relative;
优先显示	z-index: 1;

固定定位

固定定位	position: fixed;

粘性定位

粘性定位	position: sticky;