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