CSS

使用样式方式

在元素内嵌样式

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

盒子模型

 

选择器

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


其他选择器

 

常见属性

边框属性

设置宽度
    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;

发布了3 篇原创文章 · 获赞 1 · 访问量 3173
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览