CSS样式的使用

born-stubborn

已于 2024-04-25 21:59:38 修改

阅读量11

点赞数

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

于 2021-07-26 11:18:58 首次发布

本文链接：https://blog.csdn.net/qq_46002550/article/details/119088700

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是CSS？

·CSS指层叠样式表（cascading style sheets）
·样式定义如何显示HTML元素
·样式通常存储在样式表中
·把样式添加到HTML4.0中是为了解决内容与表现分离的问题
·外部样式表可以极大提高工作效率
·外部样式通常存储在CSS文件中
·多个样式可层叠为一个

选择器的使用

派生选择器

说明：派生选择器是以标签的层级关系来定位元素的
例：
body{ background-color：black }
id选择器

说明：id选择器是以标签中id属性的值来定位元素的（id是唯一的）
例：假设id等于name
则：#name{ background-color：black }
类选择器

说明：类选择器是以标签中class属性的值来定位元素的（class属性可以有多个一样的值）
例：假设class值等于pass（可以有多个）
则：.pass{ background-color：black }
属性选择器

说明：属性选择器是以标签中属性的名称来定位元素的
例：title属性
1.[title]{ color : red }：设置所有title属性的样式
2.[title=xxx]{ color : red }：设置所有title=xxx属性的样式
3.[title~=xxx]{ color : red }：设置所有title中包含xxx属性的样式。适用于由空格分隔的属性值
4.[title|=xxx]{ color : red }：设置所有title中包含xxx属性的样式。适用于由连字符分隔的属性值

如何将CSS文件插入到HTML文档中？

1.方式一（外部样式表）
<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
2.方式二（内部样式表）
<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>
3.方式三（内联样式表）
<p style="color: sienna; margin-left: 20px">
	This is a paragraph
</p>

各类样式

* {
margin:  0;/*使外边界边框都为零*/
padding:  0;/*使内边框都为零*/
  }
body {/*为整个文本添加一个背景图片*/
  }
background-image: url(bj_zhuce.jpg);/*添加一个图片*/
background-position:0 -60px/*切图，调整图片位置*/
background-repeat：no-repeat；/*禁止图片重复*/
background-repeat：repeat；/*图片重复*/
background-repeat：repeat-y；/*垂直方向图片重复*/
background-color: white;/*创建背景颜色*/
background: linear-gradient(to left top,#54dff4,#b071fe);/*渐变色*/
background-position:center;/*切图，调整图片位置*/
background-size：100px 100px;/*规定背景图片的尺寸*/
height: 100px;/*设立标签元素的高度*/
height: 100%;/*设立高度*/
width: 550px;/*设立元素的宽度*/
width: 60%;/*设立宽度*/
margin: 0 50px;/*外边框*/
margin: 0 auto;/*文本居中*/
margin-top: 45px;/*设立标签元素距离上面的距离*/
margin-left: 45px;/*设立标签元素距离左边的距离*/
margin-bottom: 30px;/*设立标签元素距离下边的距离*/
margin-right: 30px;/*设立标签元素在定位中距离右边的距离*/
left:30px;/*设立标签元素在定位中距离左边的距离*/ 
top:6px;/*设立标签元素在定位中距离上边的距离*/
line-height: 30px;/*文本上下定位*/
font-size: 12px;/*调整文本大小*/
font-weight：bold；/*字体加粗*/
font-weight：数字；/*字体变细 */
font-family;/*调整字体*/
text-align: center;/*文本居中*/
text-shadow:0 0 5px #333;/*为文字增加阴影*/
color: #37B5F9;/*设立文本颜色*/
float: left;/*使文本元素向左浮动即由竖行变为横行*/
float: right;/*向右浮动*/
display: inline-block;/*既具有块元素也具有文本元素，使行内元素的宽高发生改变*/
display：none；/*隐藏文本*/
display: block;/*  使其具有块元素 或 显示文本*/
text-decoration: none;/*去除边框，去除下划线*/
text-decoration: underline;/*  添加下划线 */
border: 1px solid #ccc;/*边框的宽度及颜色*/
border-left: 1px solid #ccc;/*左边框的宽度及颜色*/
border-width:/*边框宽度*/
border-style:/*边框样式*/
border-color:/*边框颜色*/
border-collapse:/*规定是否合并表格边框*/         collapse合并；   separate分开；
border-spacing：/*规定相邻单元格边框之间的距离*/
border-radius: 3px;/*为该正方形设立圆角，3px表示圆角大小*/
box-shadow：0 0 15px #666;/*为边框添加阴影及颜色包括位置*/
position: relative;/*相对定位元素的定位是相对其正常位置，相对定位元素经常被用来作为绝对定位元素的容器块。*/
position:  absolute;/*绝对定位*/
position：fixed；/*固定定位*/
position：static；/*静态定位*/
cursor: pointer;/*鼠标悬浮变成小手*/
cursor: default;/*鼠标移到某个位置时显示为箭头*/
empty-cells:hide;/*如果你的表格是空的就隐藏*/
user-select:none;/*禁止选中文本*/
outline:none;/*禁止选中文本框*/
opacity：0.56；/*透明度*/
list-style-type：none；/*去点*/
overflow：hidden；/*隐藏多余部分，需要给特定的宽高*/
overflow：scroll；/*用滚动条显示多余部分，需要给特定的宽高*/
overflow：auto；/*自动处理溢出，需要给特定的宽高*/
position：absolute；	clip：rect（0px 50px 200px 0px）/*如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。*/
/*垂直排列图像*/
img.top{vertical-align：text-top}
img.bottom{vertical-align：text-bottom}
text-shadow：5px 5px 5px #ff0000；/*为文本设置阴影，可规定水平阴影、垂直阴影、模糊距离以及阴影的颜色*/
word-warp：break-word；/*强制单词自动换行*/
text-align-last/*设置如何对齐最后一行或紧挨着强制转换符之前的行*/
规定动画：/*不通用*/
text-indent: 2em;/*缩进两个字符*/
animation：myfirst  5s；/*适用于IE浏览器*/
-moz-animation：myfirst  5s；/*适用于Firefox浏览器*/
-webkit-animation：myfirst  5s；/*适用于Safari和Chrome浏览器*/
-o-animation：myfirst  5s；/*适用于Opera浏览器*/
过度属性：
transition:.3s;/*用于在一个属性中设置四个过度属性，适用于IE浏览器*/
-webkit-transition:.3s;/*用于在一个属性中设置四个过度属性，适用于Safari和Chrome浏览器*/
-moz-transition:.3s;/*用于在一个属性中设置四个过度属性，适用于Firefox浏览器*/
-ms-transition:.3s；/*用于在一个属性中设置四个过度属性，适用于IE浏览器*/
/**\9:表示在 IE6 IE7 IE8浏览器中显示**/
/*  *: 表示仅在IE6 IE7浏览器中显示*/
/*  _: 表示仅在IE6浏览器中显示*/
/*  *+:  表示仅在IE7浏览器中显示*/
tr:nth-child(even) {
background-color: #ccc;/* 奇数行设置颜色 */
}
cellspacing="0"/*单元格间距为零*/
empty-cells/*规定是否显示表格中的空单元格上的边框和背景。*/
border-spacing/*规定相邻单元格边框之间的距离。*/
border-collapse/*规定是否合并表格边框。collapse(合并)/separate（分开）*/

我们能够以不同的方法为链接设置样式。能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
！important：/*设置优先级*/
text-overflow: ellipsis;/*文字超出部分用省略号代替*/
white-space: nowrap;/*禁止换行*/
overflow：scroll；/*添加滚动条（不管有没有超出）*/
overflow：auto；/*超出部分添加滚动条（横向或纵向）*/
transform: translateY(-50%);/*div垂直居中*/
box-sizing: border-box;/*解决满宽度,加边框，div挤出问题*/
min-width: 800px;/*设置和返回元素的最小宽度*/

箭头：
.jt:before{
content: "";
display: block;
background-color: white;
width: 10px;
height: 3px; 
border-radius: 10px;    
transform: rotate(45deg);
margin-top: -4px;
margin-left: 11px;
}
.jt:after{
    content: "";
    display: block;
    background-color: white;
    width: 10px;
    height: 3px; 
    border-radius: 10px;    
    transform: rotate(-45deg);
    margin-top: 4px;
    margin-left: 11px;
}

@media screen and (min-width:900px)：用于设置响应式布局

/*当屏幕最小宽度为900px时，相当于笔记本PC端*/
@media screen and (min-width:900px){
    #header,#footer{
        width:800px;
    }
}

born-stubborn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS样式的使用

什么是CSS？·CSS指层叠样式表（cascading style sheets）·样式定义如何显示HTML元素·样式通常存储在样式表中·把样式添加到HTML4.0中是为了解决内容与表现分离的问题·外部样式表可以极大提高工作效率·外部样式通常存储在CSS文件中·多个样式可层叠为一个选择器的使用派生选择器说明：派生选择器是以标签的层级关系来定位元素的例：body{ background-color：black }id选择器说明：id选择器是以标签中id属性的值来定位元素的
复制链接

扫一扫