【CSS】CSS基础标签(一)

1、CSS的三种导入样式

内部样式：

类选择器：.加class名称，如果是同一个class类里边，都会引用所写样式

ID选择器：#加id名称，不能多个使用，必须保持唯一

优先级：不遵循就近原则；ID选择器>class选择器>类选择器

        2.2层次选择器

后代选择器：在某个元素后面

body p{

}

并集选择器（同级，可以选择多组标签，且后边可以跟子选择器、后代选择器等，一般情况下竖着写并列选择器）

div ，
p a {

}

子选择器：同级下边的元素

body>p{

}

相邻选择器：相邻向下的一个元素

.active +p{
}

通用选择器：选中元素向下的所以元素

.active `p{
}

常用字体属性：

属性	表示	注意点	各属性
font-size	字号	单位为px，一定要加px
font-family	字体	实际按照要求来写	黑体、微软雅黑等
font-weigth	字体粗细	可以用数字表示，也可以用单词来表示	单词表示：bold加粗、normal默认字体（不加粗） 数字表示：700为加粗 400为不加粗
font-style	字体样式	设置是否为斜体或将斜体修正	italic斜体、normal默认样式（正常字体）
font	字体连写	连写是有顺序的，不能随意更换位置，其中字号和字体必须同时出现	font-style font-weigth font-size/line-height font-family

颜色属性：corlor：字体颜色、background-color：背景颜色

font: 12px/1.5 "微软雅黑";表示字体大小为12像素，且行高为12的1.5倍

文本格式：

text-align

center居中 right居右 left居左

文本装饰：

text-decoration

underline下划线 line-through删除线 overline上划线 none默认没有装饰线

文本缩进：常用于首行缩进

text-indent后跟需要缩进的数字，单位为em

行间距：line-height

直角变圆：border-radius 四个像素分别对应左上、右上、左下、右下 如果只改其中某一个将其他填0

li去点：list-style:none;

旋转45度：transform: rotate(45deg)

向X轴旋转45度：translateX(45px)（如果有rotate属性直接在后边加）

向Z轴旋转45度：transform:translateZ(45px)（如果有rotate属性直接在后边加）

向Y轴旋转45度：transform:translateY(45px)（如果有rotate属性直接在后边加）

缩放大小：transform: scale(1.2);

动态动画：

调用动画:animation: 动画名称 1s linear infinite alternate;

 @keyframes 动画名称{

       0%{

transform: scale(1);

}

 100%{

transform: scale(1.2);

}

    }

阴影：box-shadow:0px 0px 0px 0px black;

链接伪类选择器（四个不可以颠倒顺序，一般常用hover）

a:link	未访问的链接颜色
a:visited	选择点过之后的访问链接颜色
a:hover	选择鼠标经过的链接颜色
a:active	鼠标按下去的颜色颜色

focus伪类选择器(input框选中时的颜色)

input:focus{corlor:red;}

first-child第一个样式

last-child最后一个样式

第一个li的样式：li:first-child { color:#f00; }
最后一个li的样式：li:last-child { color:#000; }
第n个li的样式：li:nth-child(n) { color:#000; }
倒数第二个li的样式：nth-last-of-type(2){color:#000; }

第二个li的样式：nth-of-type(2){color:#000; }
奇数列表：li:nth-child(odd) { color:#f00; }
偶数列表：li:nth-child(even) { color:#f00; }

标签中选中存在ID的元素：标签名[ID=xx]{属性}

标签中选中包含有某个class的元素：标签名[class*=xx]{属性}（*=表示包含， =表示绝对等于）

class中可以含有多个类：

/* 选中class中包含qwe的类 */
a[class*=qwe]{
   background-color: pink;
}
/* 选中id中包含q的属性 */
a[id*=q]{
   background-color: aquamarine;
}
/* 选中包含class的类 */
a[class]{
   color: red;
}
/* 悬浮到链接字体为黄色  */
a:hover{
  
   color: yellow;
  
}
/* 去掉下划线  且将a链接转换为行内快元素 且宽高为30px */
a{
   display: inline-block;
   height: 30px;
   width: 30px;
   text-decoration: none;
}

    
    
    
    




    
    123
    
    
    
    

常见的块级元素有h1-h6、div、p、ol、ul、li等，其中div是最典型的块级元素

常见的行内元素有：a、span、strong、em、del、ins等，其中span是最典型的行内元素

常见的行内块元素：image、input、td

行内元素转化为块元素：display:block;

块元素转化为行内元素：display:inline;

行内元素转化为行内块元素：display:inline-block;

背景图片：background-image: url(图片路径);

背景平铺： background-repeat

no-repeat;	不平铺
repeat;	默认样式；铺满
repeat-x	x轴平铺
repeat-y	y轴平铺

背景图片位置：background-position：x  y

参数代表的意思：x坐标和y坐标。可以使用方位名词或者精准单位，如果方位名词只使用一个，第二个默认为center

参数值	说明
lenght	百分数 | 由浮点数字和单位标识符组成的长度值
position	top | center | bottom | left | center | right | 方位名词

背景图像固定（背景附着）： background-attachment: 

参数值	说明
scrool	背景图像随对象内容滚动
fixed	背景图像固定

背景复合写法：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

背景色半透明：background:rgba(0,0,0,0.5)  其中前三个为红绿蓝，最后一个值为透明度，取值范围在0-1 可以将0省略，直接输入.5也可以

 /*背景图片  背景平铺  背景图片位置 背景图片固定  背景透明度  */ 
   background-image: url();
   background-repeat:repeat-x;
   background-position: center left;
   background-attachment: fixed;

   background: rgba(77, 77, 77, .5); 
   /* 背景复合写法 */
   background: url() repeat-x left center fixed rgba(77, 77, 77, .5);