> 文档中心 > CSS基础标签(一)

CSS基础标签(一)

1、CSS的三种导入样式

内部样式:css样式代码,每一个声明,最好都用分号结尾

语法:

选择器{

声明1;

声明2;

……

}

引用外部样式:将css样式导入html中

行内样式:直接在需要增加样式得标签元素中添加style属性,编写样式即可,如果有多个样式,用分号结尾

优先级:就近原则

2、选择器

        2.1 基本选择器

标签选择器:会选择到页面上所有的标签

 选择器{    声明1    声明2}

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

 .class名称{   声明1   声明2}

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

 #ID名称{   声明1   声明2}

优先级:不遵循就近原则;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:背景颜色

文本格式:

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    123    123    123    123    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);