CSS

最新推荐文章于 2024-07-24 13:52:24 发布

ab13653777822

最新推荐文章于 2024-07-24 13:52:24 发布

阅读量191

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/ab13653777822/article/details/105128424

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用样式方式

在元素内嵌样式

<a href="https://www.baidu.com/" target="_b" style="font-size: 100px;color: #00ff00;">链接文本</a>

全局css

放在<head></head>标签之间
<head>
<style type="text/css">
a{
font-size: 40px;
color: #66ccff;
}
</style>
</head>
其中a表示所有的a标签的元素都应用该样式
如果a改为*，则为所有的元素都应用该样式

导入css

<head>
<link rel="stylesheet" type="text/css" href="aa.css">
</head>

aa.css文件中

a{

font-size: 50px;
color: #ff66ff;
}

盒子模型

标准盒子和怪异盒子
box-sizing有两个属性，

content-box保准盒子，元素实际大小为宽高+border+padding
border-box怪异盒，padding和border包含在width和height中，元素实际大小为宽高

选择器

<a href="https://www.baidu.com/" target="_b" >百度</a>
<a href="https://www.qq.com/" target="_b" >腾讯</a>
<p class="c1">123</p>
<p id="id_p">456</p>
<p>789</p>
<h1 class="c1">101112</h1>
<h1>131415</h1>
<h1>161718</h1>

所有选择器

星号*
*{
font-size: 40px;
color: #FF00FF;
}

类型选择器

直接用类型标签
a{
font-size: 40px;
color: #FF00FF;
}

类选择器

点加类名
.c1{
font-size: 40px;
color: #FF00FF;
}

id选择器

（id是不建议重复的）
#加id值
#id_p{
font-size: 40px;
color: #FF00FF;
}

属性选择器

方括号内填写属性
[href]{
   font-size: 40px;
   color: #FF00FF;
}
或者[属性=值]
[href="https://www.baidu.com/"]{
   font-size: 40px;
   color: #FF00FF;
}

冒号选择器

某个选择器之后加冒号再加事件
a:hover{
font-size: 40px;
color: #FF00FF;
}

其他选择器

div,p   选择所有 <div> 元素和所有 <p> 元素，
div p   选择 <div> 元素内部的所有 <p> 元素
div>p   选择父元素为 <div> 元素的所有 <p> 元素
div+p   选择紧接在 <div> 元素之后的所有 <p> 元素
:before   p:before   在每个 <p> 元素的内容之前插入内容
:after   p:after   在每个 <p> 元素的内容之后插入内容
p:only-child   选择属于其父元素的唯一子元素的每个 <p> 元素
p:nth-child(2)   选择属于其父元素的第二个子元素的每个 <p> 元素
p:nth-last-child(2)   同上，从最后一个子元素开始计数。
p:first-child
p:last-child

常见属性

边框属性

设置宽度
   border-width: 5px;
设置样式
   border-style: groove;
设置颜色
   border-color: #125869;
设置倒角
   border-radius: 25%;

设置元素的宽高
   height: 140px;
   width: 150px;

背景

设置图片
   background-image: url(bb.jpg);
设置重复方式
   background-repeat:repeat;
设置背景是否跟着滚轮滚动
   background-attachment:local;
   fixed表示不动
设置背景大小
   background-size:cover;
设置背景颜色
   background-color:#ff00ff;

对齐方式

居中
   text-align:center;
右对齐
   text-align:right;
文本方向
   direction:rtl;

段落设置

字母间距letter-spacing: 10px;
单词间距word-spacing: 10px;
行高line-height: 10px;
首行缩进text-indent: 20px;
文本装饰text-decoration: underline;（下划线）
文本转换text-transform: uppercase;

字体

字体名称font-family:fantasy;
字体大小font-size: 50px;
字体样式font-style: oblique;（倾斜等）
指定字母是否以大小写区别显示font-variant: small-caps;
设置字体粗细font-weight: 900;
创建文本阴影text-shadow: 1px 10px 5px red;（四个参数分别是水平偏移垂直偏移模糊程度阴影颜色）

过度

延时执行transition-delay: 100ms;
渐变时间transition-duration: 1s;
需要渐变的参数transition-property: width;（不写这一条就是全部渐变）
时间渐变函数transition-timing-function:ease-in-out;
.c1{
	height: 200px;
	width: 200px;
	background-color: magenta;
}
.c1:hover{
	height: 400px;
	width: 400px;
	background-color: yellow;
	transition-delay: 100ms;
	transition-duration: 1s;
	transition-property: width;
	transition-timing-function:ease-in-out;
        }

使用动画

执行顺序原始样式》from》50%》to，如果有animation-direction:alternate;再反着执行一边

动画开始延时animation-delay: 100ms;
动画执行时间animation-duration: 1s;
动画名字animation-name: anim;
总共执行数量animation-iteration-count: infinite;
是否反着执行animation-direction:alternate;
动画会一直执行到最后一帧animation-fill-mode: forwards;
.c1:hover{
            animation-delay: 100ms;
            animation-duration: 1s;
            animation-name: anim;
            animation-iteration-count: infinite;
            animation-direction:alternate;
		animation-fill-mode: forwards;
		
        }
        @keyframes anim{
            from{

                height: 300px;
                width: 300px;
                background-color:#0000ff;
            }
            50%{

                height: 500px;
                width: 500px;
                background-color:#00ff00;
            }
            to{
                height: 400px;
                width: 400px;
                background-color:#ff00ff;
            }

        }

变换

透明度opacity:0;
旋转角度transform: rotate(45deg);
缩放比例transform: scale(1.5);
设置变换中心点transform-origin: right top;

布局

定位属性：position

position:static;HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
position:fixed;元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
position:relative;相对定位元素的定位是相对其正常位置。
position:absolute;绝对定位的元素的位置相对于最近的已定位(设置过position)父元素，定位使元素的位置与文档流无关，因此不占据空间。
position:sticky;基于用户的滚动位置来定位。

z轴定位
z-index=1;设置绝对定位的层顺序只支持定位元素

布局属性：display
每个网页元素都有一个display属性，并有一个默认值，例如div默认值是block，span默认值是inline
常见属性

none隐藏，占用的空间也不在。
inline内联元素，没有宽高属性，不会独占一行
block块元素
inline-block内联块元素，有宽高属性，不会独占一行
table-cell表格单元格
flex弹性盒

浮动属性：float，clear

float:none/left/rght;
clear:left/rght/both;清除浮动

任何一个元素设置了float，都可以设置宽高并且不会独占一行

阴影属性

text-shadow

box-shadow

可见设置

visibility=hidden;隐藏，但是占用的空间还在。
opacity=0;设置透明度，0为完全透明。

overflow:hidden;超出隐藏

ab13653777822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

使用样式方式在元素内嵌样式<a href="https://www.baidu.com/" target="_b" style="font-size: 100px;color: #00ff00;">链接文本</a>全局css放在<head></head>标签之间<head> <style type="...
复制链接

扫一扫

专栏目录