【CSS】CSS基础标签(一)

A Lucky Boy

已于 2022-05-13 17:43:49 修改

阅读量1.4k

点赞数 3

分类专栏： CSS 文章标签： css3 css elementui 前端

于 2022-02-20 14:37:09 首次发布

本文链接：https://blog.csdn.net/weixin_43797577/article/details/123029975

版权

CSS 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1、CSS的三种导入样式

内部样式：<style>css样式代码，每一个声明，最好都用分号结尾

语法：

选择器{

声明1;

声明2;

……

}

引用外部样式：<link rel="stylesheet" href=" ">将css样式导入html中

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

优先级：就近原则

2、选择器

2.1 基本选择器

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

<style>
 选择器{
    声明1
    声明2
}
</style>

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

<style>
 .class名称{
   声明1
   声明2
}
</style>

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

<style>
 #ID名称{
   声明1
   声明2
}
</style>

优先级：不遵循就近原则；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;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
</head>
<link rel="stylesheet" href="../css/style.css">

<body>
    <a href="#" class="bet qwe asd 123" id="qwe">123</a>
    <a href="#" class="bet  123">123</a>
    <a href="#" class=" asd 123" id="q">123</a>
    <a href="#" class="bet qwe asd " id="asd">123</a>
    <a href="#" class="bet qwe asd 123" id="zcx">123</a>
    <a href="#" class="qwe 123" id="vcb">123</a>

</body>

</html>

常见的块级元素有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);

A Lucky Boy

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS】CSS基础标签(一)

1、CSS的三种导入样式内部样式：<style>css样式代码，每一个声明，最好都用分号结尾语法：选择器{声明1;声明2;……}引用外部样式：<link rel="stylesheet" href=" ">将css样式导入html中行内样式：直接在需要增加样式得标签元素中添加style属性，编写样式即可，如果有多个样式，用分号结尾优先级：就近原则2、选择器2.1 基本选择器标签选择器：会选择到页面上所有的标签&...
复制链接

扫一扫