css总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css总结相关的知识，希望对你有一定的参考价值。
一、首先介绍如何使用css样式
1、内联样式
通过style属性来控制标签显示的样式
<h1 style="color: red;font-size: 20px">内联样式</h1>
2、内部样式表
在html的头部定义一个style的标签，定义某个标签的css的样式，比如可以定义
a、现在head中定义style标签
<style>
h2{
color: blue;
font-size: 10px;
background-color: aquamarine;
}
h3{
color: palevioletred;
font-size: 20px;
}
h1{
color: aqua;
}
</style>
b、在body中使用该css样式
<h2>内部样式表</h2>
<h3>内部样式表</h3>
如果内部样式表和内联样式表有冲突，那么哪个会生效呢，实际测试，发现内联样式的生效优先级高于内部样式表
3、外联样式
定义一个stylesheet文件这个文件中定义某个标签的样式，然后在html文件中通过link去引入文件，这样html中对应的标签就会使用stylesheet文件中定义的样式
a、定义一个stylesheet文件，文件的内容如下
div{
color: palevioletred;
font-size: 20px;
}
h1{
color:green;
font-size: 10px;
background-color: aquamarine;
}
b、在html文件中使用
<div>外联样式</div>
二、css的语法规则
div{
color: palevioletred;
font-size: 20px;
}
选择器
元素
class
声明
属性名
属性值
比如div这里就是选择器，color是属性名，palevioletred是属性值
.xdd{
color: palevioletred;
font-size: 20px;
}
<p class="xdd"></p>
比如这里的例子，定义个样式，名称为.xdd，然后在标签中通过class属性来设定该标签的样式
三、css的属性
1、css定义颜色
color定义字体的颜色
定义css样式
<style>
.xxx{
color: red;
}
.yyy{
color: blue;
}
p{
color:brown;
}
</style>
使用定义的样式
<p class="xxx">第一个段落1</p>
<p class="yyy">第一个段落2</p>
<p>第一个段落3</p>
<p>第一个段落4</p>
2、css定义背景
<style>
body{
background-color: aqua;
设置背景颜色
background: url("../1.ico");
设置背景图片
background-repeat: no-repeat;
设置背景图片不重复
/*background-repeat: repeat-x;*/
设置背景图片横向重复
/*background-repeat: repeat-y;*/
设置背景图片纵向重复
/*background-repeat: repeat;*/
设置备份图片横向纵向同时重复
background-position: right top;
设置背景图片的位置
/*background-position: 10px 20px;*/
设置背景图片的位置，用像素的方式
/*background-position: 20% 30%;*/
设置背景图片的位置，用百分比的方式
background-attachment: fixed;
设置背景图片固定
}
</style>
3、css定义边框属性
css定义边框属性
p{
border-width: 4px;
设置边框的宽度
border-style: solid;
设置边框的风格类型
border-color: aquamarine;
设置边框的颜色
border-radius: 50px;
设置边框的圆角，像素越大，圆角越明显
}
设置四个框的的属性
div{
background-color: #dddddd;
border-left-color: brown;
border-left-style: solid;
}
也可以单独设置某个边框的属性
css定义padding属性，设置文字举例内边框的距离
.xxx{
border-width: 20px;
border-style: solid;
border-color: aqua;
padding: 20px;
}
同时设置文字距离4个边框的长度
.yyy{
border-width: 20px;
border-style: solid;
border-color: aqua;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 20px;
padding-top: 25px;
}
分别设置文件距离4个内边框的距离
4、css定义margin属性，设置标签距离外部其他元素的距离
style>
.cc{
border-color: red;
border-style: solid;
border-width: 2px;
padding: 20px;
margin: 40px;
}
</style>
设置一个margin的属性为40px，那么引用cc的这个元素距离外部的元素的距离是40个像素
<h1>测试margin</h1>
<p class="cc">这是一个margin</p>
<h2>测试margin</h2>
这个效果就是p标签距离h1和h2标签的距离都是40像素，同样，margin也可以分别设定上下左右的margin的属性值
5、css定义宽度和高度
<style>
.cc{
border-style: solid;
border-width: 2px;
border-color: red;
background-color: blue;
width: 50px;
height: 100px;
}
</style>
设置宽度和高度，这里设置了具体的值，也可以设置为百分比，这个百分比相当于body的百分比
<h1 class="cc">测试元素的宽度和高度</h1>
<p class="cc">测试元素的宽度和高度</p>
<h2 class="cc">测试元素的高度和宽度</h2>
css设置元素的外边框,这个和border还不一样，outline这个外边框在border外面
<style>
.cc{
border-width: 3px;
border-style: solid;
border-color: black;
outline-color: blue;
outline-style: solid;
outline-width: 4px;
}
</style>
<p class="cc">css设置元素的外边框,这个和border还不一样，outline这个外边框在border外面</p>
6、css定义文本相关样式
color：设置字体颜色 text-align:设置文本的位置，靠左，靠右 text-docration:定义文本中线【line-throngh】，下划线【underline】，上线【overline】 text-transform: lowercase;定义文本中的字母都为小写，用来转换字母的属性 text-indent：设置文本内容缩行，设置文档的首行往里缩多少个像素 text-spacing：设置文本内容的字符的间隔 line-height:设置文本中的行间距，属性值是数字，是标准行间距的倍数，也可以设置像素值
7、css定义字体
font-family:设置字体的类型 font-style：设置字体的风格，比如斜体 font-size：设置字体的大小，一般默认的字体大小是16个像素值 font-weight：设置字体的粗度的效果
8、css控制元素的显示状态display属性
display：none 隐藏标签 display：block 显示标签，且会被行内标签调整为块级标签 display：inline 把块级标签调整为行内标签 visibility：hidden：隐藏元素，但是被隐藏的元素所占的高度和宽度还会继续保留，不会被其他元素占用，这个就是和display不一样的地方
9、
css定义元素的最大宽度
max-weith：
10、css定义元素位置
position static，一般就是元素原来的位置，static和没有这个属性的效果是一样的，就算设置了left right top buttom都会不生效 relative,可以设置left right top buttom的值，意思就是距离左边多远，右边多远，上边多远，下边多远，相对于参数static时候的位置 fixed，他的效果和relative的效果一致，唯一的区别就是如果有滚动条，如果拉动滚动条，那么relative的的元素会变，而fix的元素位置是固定的
11、css定义元素层次
z-index 如果有2个元素在一个位置，z-index就是定义哪个元素在上面显示哪个元素在下面显示，z-index的值越大，则显示的越在上面
12、css控制元素的溢出
overflow
visible:如果一个元素在框中，而元素的内容已经超出元素的外框，那么元素就溢出，不会做任何处理
hidden：如果一个元素在框中，而元素的内容以及超出元素的外框，那么超出外框的元素就会被隐藏不会被显示
scroll：如果一个元素在框中，而元素的内容已经超出元素的外框，那么就会有滚动条出现，如果元素的内容没有超出外框，外框也有滚动的栏出现
auto：如果一个元素在框中，而元素的内容已经超出元素的外框，那么就会有滚动条出现，如果元素的内容没有超出外框，外框就不会有滚动的栏出现
.auto{
border-width: 2px;
border-style: solid;
border-color: pink;
width: 300px;
height: 100px;
overflow: auto;
}
13、css控制元素浮动
css控制元素浮动 float none left right
14、css定义元素：把元素从水平方向摆放，如果浏览器变大，会自动向下摆放
inline-block
<style>
.cc{
border-width: 2px;
border-style: solid;
border-color: red;
width: 440px;
height: 80px;
display: inline-block;
}
.bb{
border-width: 2px;
border-style: solid;
border-color: blue;
}
</style>
15、css定义元素的对齐方式
元素居中对齐
.cc{
border-color:red;
border-style:solid;
border-width:2px;
width:50%;
margin: auto;
}
上面的办法可以实现元素居中显示，如果元素要居中，对已块级标签，则必须要有一定的宽度
文本的居中对齐
<style>
.cc{
border-color:red;
border-style:solid;
border-width:2px;
width:50%;
text-align: center;
}
</style>
图片居中对齐
.pic{
display: block;
margin: auto;
}
元素的左对齐，右对齐
.right{
background-color: blue;
width: 100px;
height: 50px;
position: absolute;
right: 0;
}
16、css定义元素的透明度
opacity
.opacity{
opacity: 0.2;
}
17、css定义元素的阴影
.box{
border-color: red;
border-style: solid;
border-width: 2px;
width: 300px;
height: 300px;
color: green;
background-color: pink;
box-shadow: 20px 15px 10px black
}
20px 15px 10px black
20：定义x轴的宽度
15：定义y轴的宽度
10：定义虚幻的程度，这个可以不加，非必须的
black：阴影的颜色
18、css定义元素样式过度
transition
.transition{
width: 100px;
height: 200px;
background-color: red;
transition: 1s;
}
.transition:hover{
width: 150px;
height: 250px;
background-color: green;
}
上面这个例子的效果就是，把鼠标放到标签上，过1s后，样式会自动过度到transition:hover的样式上，如果没有定义transition: 1s，那么只要鼠标放在标签上，就会立刻切换到
transition:hover的样式上
19、css定义元素动画效果
animation
<style>
.animation{
width: 200px;
height: 200px;
border-color: blue;
border-width: 1px;
border-style: solid;
position: relative;
background-color: #dddddd;
animation: example 10s;
}
@keyframes example {
from{width: 200px;
height: 200px;
border-color: blue;
border-width: 1px;
left: 0px;
top: 0px;
background-color: #dddddd;
}
to {
width: 400px;
height: 400px;
border-color: red;
border-width: 10px;
left: 600px;
top: 100px;
background-color: palegreen;
}
}
</style>
上面的例子的意思是，初始的样式为animation定义的样式，然后在10s完成切换，然后从keyframes example from切换到keyframes example to的状态
animation: example 4s infinite; 这个的意思是4s完成切换，但是会一直切换，也就是无穷尽的执行
animation: example 4s ease-in-out alternate infinite; 这个意思是无穷尽的切换，从from到to，然后从to到from alternate的效果是从from到to，然后从to到from infinite的效果是无穷尽的切换
四、最后介绍一下css的选择器
元素选择器
用标签的名称作为css的名称，去定义样式，如果有定义，那么该标签都会自动应用该样式
类选择器
以点“.”开头，然后在标签中通过class去应用该样式，就可以在该标签中应用该样式
id选择器
以“#”号开头，在标签中id为样式定义的id的标签会应用定义的样式
组合选择器
div p{
}
这个意思是div中的p元素应用该样式，如果div中有个span，在span中又有一个p元素，这个p元素也会应用该样式
div > p{
}
这个意思只对div下的p元素生效，如果div中有个span，span中又有一个p，则该p不会应用该样式
以上是关于css总结的主要内容，如果未能解决你的问题，请参考以下文章