【CSS】元素样式
1、使用CSS的三种方式:
方式一、通过元素的style属性来设置元素的样式
方式二、在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源，通常是一个CSS文件。
方式三、在HTML头部标签<head>中通过一对标签<style></style>来定义元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何使用css</title>
<style>
p{
color:green;
}
</style>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1 style="color: red;font-size:24px;">如何使用css</h1>
<p>段落的内容</p>
<div class="content"></div>
</body>
</html>
推荐使用<link>方式，有利于缓存，能提高页面的加载速度，提高性能
2、CSS的语法规则:
选择器:元素、class、伪类、伪元素、组合
声明：
{}
属性名
属性值
示例：
div{ color:yellow; background-color:red; }
3、CSS常用属性
【color】:元素内部文本的颜色。属性值有三种书写方式：colorname、RGB、十六进制。RGB和十六进制比colorname能定义出更丰富的颜色，颜色取值可以更精细化
p{color:red;} /*colorname方式给属性赋值*/
p{color:rgb(255,0,0);} /*RGB方式给属性赋值*/
p{color:#FF0000;} /*十六进制方式给属性赋值*/
【background-color】:元素背景色
body{
background-color:#eee;
}
【background】:元素背景图片，同时设置background-color和background，则background会覆盖掉background-color
body{
background:url(./cloth.png);
}
【background-repeat】:背景图片重复拼接的方式
body{
background:url(./cloth.png);
background-repeat:repeat; /*图片尺寸比元素尺寸小时，图片会重复拼接*/
background-repeat:repeat-x; /*图片只是x方向填充*/
background-repeat:repeat-y; /*图片只是y方向填充*/
background-repeat:repeat-x repeat-y; /*图片x、y两个方向都填充*/
background-repeat:no-repeat; /*图片不重复拼接*/
}
【background-position】:背景图片的位置
body{
background:url(./cloth.png);
background-position:left; /* 有五个属性值:left、right、top、bottom、center*/
background-position:left top; /*图片默认的位置*/
background-position:left center; /*图片垂直居中，设置了center，则需要指定body元素的height属性值，否则看不出效果*/
background-position:center; /*图片水平、垂直方向同时居中*/
background-position：50px 50px;
background-position:50% 50%; /*图片水平、垂直方向同时居中*/
}
【background-attachment】:背景图片是否会跟随浏览器滚动条滚动
body{
background:url(./cloth.png);
background-attachment:local; /*默认值，图片会随着浏览器滚动条进行滚动*/
background-attachment:fixed; /*图片不会随着浏览器滚动条滚动*/
}
总结：背景色、背景图简写到一起
body{
background:#eee url(./cloth.png no-repeat 50% 50%)
}
【border】:元素边线。border-width、border-style、border-color是三个必要属性，必须指定。
p{
/*全写方式*/
border-width:1px;
border-style:solid;
border-color:blue;
border-radius:25px;/*边框圆角效果,属性值越大，则圆角效果越明显，属性值也可以是百分比*/
/*简写方式*/
border:2px solid blue;
border-radius:25px; /*简写时，border-radius要单独写，无法写在border属性后*/
}
div{
background-color:#eee;
border-left:10px solid orange; /*设置左边边线*/
border-color:red green blue orange; /*设置四个边框线的颜色，颜色设置顺序是：上右下左*/
}
【padding】:用于设置元素内容和边线(border)之间的间距
p{
border:1px solid blue;
padding:20px 10px; /*上下间距是20px，左右间距是10px*/
padding:20px; /*上下左右的间距都是20px*/
padding:30px 20px 10px; /*上:30px，左右:20px,下:10px*/
padding:10px 20px 30px 40px; /*值的顺序对应上、右、下、左*/
padding-left:20px;
}
【margin】:元素边线(border)与页面其他元素之间的间距。必须指定元素的宽度,margin:auto 才有效果。
p{
border:1px solid red;
margin:50px; /*上下左右都是50px*/
margin:50px 100px; /*上下50px，左右100px*/
margin:50px 100px 150px; /*上50px，左右100px，下150px*/
margin:20px 50px 80px 100px; /*值的顺序对应上、右、下、左*/
margin-left:300px;
margin:auto; /*水平居中*/
}
【width、height】:元素的宽度和高度
p{
background-color:lightblue;
height:200px;
width:500px;
width:20%; /*百分比相对于它外层容器宽度的一个百分比，假设p放在body中，body的宽度是1000px，则p的宽度是1000*0.2=200px*/
}
【outline】:外边线，有别于border，在border之外,不属于元素的盒子模型部分。
p{
border:20px solid #000;
outline:15px solid red;
}
文本内容的css属性
【color】:文本内容的颜色
【text-align】:文本内容位置(靠左、靠右、居中)
【text-decoration】:文本内容的中线、上线、下划线
【text-transform】:英文字符大小写转换
【text-indent】:设置文本内容首行缩进
【letter-spacing】:设置文本内容的字符间隔,对中文和英文都有效
【word-spacing】:设置单词之间的间隔,只对英文起作用，对中文不起作用
【line-height】:设置文本内容的行间距
p{
border:solid 1px red;
color:red;
text-align:center;
text-align:left;
text-align:right;
text-align:justify;/*文本内容两端对齐*/
text-decoration:line-through; /*中线*/
text-decoration:overline; /*上线*/
text-decoration:underline; /*下线*/
text-decoration:inherit; /*inherit表示继承上级元素的text-decoration属性的值*/
text-transform:lowercase; /*转小写*/
text-transform:uppercase; /*转大写*/
text-transform:capitalize; /*首字母转大写，其他字母不转*/
text-indent:inherit;
text-indent:50px;
letter-spacing：2px;
letter-spacing:-2px; /*属性值可以为负值*/
word-spacing:3px;
line-height:2; /*表示2倍的行间距，所以此处不是2px，而是2，数字后不带单位*/
line-height:20px; /*表示行间距是20px,line-height:20px和line-height:2 两者意思不一样 */
}
【display】:控制元素显示状态(显示、隐藏)
span{
background-color:lightblue;
display:none; /*元素不显示，隐藏起来*/
display:block; /*1、元素显示，不隐藏；2、行内元素转成块元素*/
display:inline; /*块元素变成行内元素*/
display:inline-block; /*还是在一行显示*/
}
总结:
元素display:inline时,设置width、height，是没有效果的,
元素display:block和display:inline-block时，设置width、height，是有效果的。
【visibility】:
p{
height:300px;
background-color:orange;
visibility:hidden;/*虽然元素隐藏了，但是浏览器页面仍然保留了元素的宽度和高度，跟display:none不一样*/
}
【z-index】:设置元素的堆放层次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
img{
position: absolute;
top: 10px;
left: 5px;
/*z-index:-1; z-index为负数，表示图片显示在页面其他元素下方 */
} h1,p{
position: relative;/*此处postion:absolute，则h1、p元素的位置会重叠，故设置为relative*/
z-index:1;
}
</style>
</head>
<body>
<h1>z-index</h1>
<h1>图片</h1>
<img src="./suihua.png" width="300px" height="300px">
<p>碎花</p>
</body>
</html>
当利用position移动元素，元素位置发生重叠时，z-index属性用来控制哪个元素显示在上，哪个元素显示在下，简而言之，就是用来控制元素在页面的显示顺序。
元素要指定了position属性，且position属性值为relative、absolute、fixed三者之一，使用z-index才有效果，
postion属性值为static时，使用z-index，无效果。
z-index的值越大，元素展现层次越靠前。
【overflow】:用来处理元素内容的溢出情况。当元素的内容大于元素宽度或者高度，称为溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow 溢出</title>
<style>
.overflow{
border:1px solid red;
background-color:#eee;
width:200px;
height:100px;
/*overflow:visible; 默认值，溢出的内容显示出来*/
/*overflow:hidden; 溢出的内容隐藏*/
/*overflow:scroll; 不管元素内容有没有溢出，都会有显示出一个滚动条的位置*/
overflow: auto; /*x方向内容溢出，出现水平滚动条;y方向内容溢出，出现垂直滚动条；x、y方向同时溢出，则出现垂直和水平滚动条*/
/*overflow-x: hidden; */
/*overflow-y: auto;*/
}
p{
width: 250px; /*p元素的宽度大于父级元素div的宽度*/
background-color: lightblue;
}
</style>
</head>
<body>
<h1>overflow</h1>
<div class="overflow">
入夜渐微凉繁花落地成霜你在远方眺望耗尽所有目光不思量自难相忘夭夭桃花凉前世你怎舍下这一海心茫还故作不痛不痒不牵强
<p>都是假象</p>
</div>
</body>
</html>
【float】:元素的浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float浮动</title>
<style>
.div1{
border: solid 3px blue;
width:100px;
height: 50px;
margin: 10px;
float: right;
} .div2{
border:3px solid red;
height: 100px;
clear: right;
/*clear: left; */
/*clear: both; bothq指left、right*/
} .div3{
border: 3px solid blue;
/*overflow: auto;*/
} .div4{
border: 3px solid red;
width: 50px;
height: 100px;
float: right;
} /*伪类选择器*/
.clearfix::after{
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h1>float</h1>
<div class="div1">
div1 content
</div> <div class="div2">
div2 content
</div> <h2>overflow:auto</h2>
<div class="div3 clearfix">
div3 content
<div class="div4">
div4 content
</div>
</div>
</body>
</html>
1、元素float后，会脱离文档流，它原来的位置就会被其他元素占据。
2、float不但控制元素本身，还会影响下一个元素的位置。
当一个元素受到另外一个浮动元素的影响时，可以使用clear属性来清除float元素对它的影响。
3、当一个子元素的高度大于它父级元素的高度，同时子元素float，则会出现子元素溢出父容器的情况，两种解决方式：
一、父元素overflow:auto,父容器会自动调整高度以适应子元素的高度，使子元素不溢出，但是overflow:auto会出现滚动条。
二、父元素class='clearfix'，clearfix是我们自己写的一个伪类选择器样式，可参照代码。既解决溢出，同时还不会出现滚动条，比第一种解决方式好。
【inline-block】:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-block</title>
<style> /*实现方式一*/
.floatbox1{
border:solid 3px blue;
width: 200px;
height: 200px;
margin: 10px;
display: inline-block;
} .div1{
border: 3px solid red;
} /*实现方式二*/
.floatbox2{
border:solid 3px blue;
width: 200px;
height: 200px;
margin: 10px;
float: left;
}
.div2{
border: 3px solid red;
clear: left;
}
</style>
</head>
<body>
<h1>实现方式一</h1>
<div class="floatbox1">div1</div>
<div class="floatbox1">div2</div>
<div class="floatbox1">div3</div>
<div class="floatbox1">div4</div>
<div class="floatbox1">div5</div>
<div class="floatbox1">div6</div>
<div class="div1">
div1 content
</div> <br/><br/><br/><br/><br/><br/><br/>
<h1>实现方式二</h1>
<div class="floatbox2">div1</div>
<div class="floatbox2">div2</div>
<div class="floatbox2">div3</div>
<div class="floatbox2">div4</div>
<div class="floatbox2">div5</div>
<div class="floatbox2">div6</div>
<div class="div2">
div2 content
</div>
</body>
</html>
要达到代码中的效果，两种处理方式:
一是前面6个div使用display:inline-block
二是前面6个div使用float:left,第7个div使用clear:both
【opacity/rgba】:元素透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>opacity透明度</title>
<style> /*opacity属性值默认是1，也就是不透明。opacity值的范围为【0-1】*/
.opacity{
width:400px;
height:300px;
opacity:0.5;
} /*元素背景色和元素内部文字都会有透明度*/
.box{
width:400px;
height:300px;
background-color:rgb(8,138,118);
opacity:0.5;
} /*rgba方式：元素背景色有透明度，元素内部文字无透明度*/
.rgba{
width:400px;
height:300px;
background-color:rgba(8,138,118,0.5);
/* rgba 前面三个数字是颜色值，最后一个数字是透明度值，透明度的范围是【0-1】*/
}
</style>
</head>
<body>
<img class="opacity" src="./suihua.png" alt="">
<img src="./suihua.png" alt="" width="400px" height="300px"> <div class="box">
<h1>box content</h1>
</div> <div class="rgba">
<h1>box content</h1>
</div>
</body>
</html>
4、CSS3属性
shadows:元素阴影
transition:元素样式过过渡
animation:元素动画效果
shadows代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影</title>
<style>
.box{
background-color: rgb(17,148,56);
text-align:center;
width:300px; box-shadow: 5px 35px;/*5px表示右边，35px表示下边*/
box-shadow: 0 5px grey; /*grey表示阴影颜色*/
box-shadow: 0 5px 10px grey; /*10px表示阴影虚化效果*/
box-shadow: 0 15px 20px rgba(0,0,0,0.3); /*15px-16px,20px-24px,此处写法增强阴影效果*/
box-shadow: 0 15px 20px rgba(0,0,0,0.3),0 16px 24px rgba(0,0,0,0.19); /*box-shadow: -5px -15px; 为负数表示上边和左边*/
} .box h1{
color: #ffffff;
padding: 80px 0; /*上下80px,左右0*/
}
</style>
</head>
<body>
<h1>shadows</h1>
<div class="box">
<h1>shadow</h1>
</div>
</body>
</html>
transition代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition过渡</title>
<style>
.transition{
width:200px;
height:200px;
background-color: lightblue;
transition:1s; /*单位为秒，可以是小数，表示过渡的时间，在1s内完成样式的过渡*/
transition:1s ease; /*ease:缓慢*/
transition:1s ease-in; /*ease-in：开始缓慢，后面越来越快*/;
transition:1s ease-out; /*ease-out:后面缓慢*/
transition:1s ease-in-out; /*开始和后面缓慢，中间快*/ transition:1s ease-in-out 2s; /*2s表示延迟(先延迟2s，再在1s内完成元素样式的过渡)*/
transition:width 4s 2s;/*宽度样式过渡，高度不过渡*/
transition:width 4s 1s,height 8s; /* width和height两个样式都要过渡*/
-webkit-transition:width 4s 1s,height 8s; /*谷歌浏览器的一些版本需要使用webkit才会起作用*/
} /*伪类选择器*/
.transition:hover{
width: 1200px;
height: 800px;
}
</style>
</head>
<body>
<div class="transition"> </div>
</body>
</html>
animation代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation动画</title>
<style>
/*动画效果的实际，就是元素一个状态切换到另外一个状态，再切换到另外一个状态，
这样整个连贯下来，展示的就是动画的效果*/
.animation{
width:100px;
height:100px;
background-color:red;
/*animation:example 4s 1s ease-in-out 3; 1s表示延迟 3表示动画执行次数*/
/*animation:example 4s 1s ease-in-out infinite; infinite表示执行次数为无限循环*/
/*animation:example 4s 1s ease-in-out 3 reverse; reverse:反转动画状态从to-from，不设置时reverse，是from-to*/
animation:example 4s 1s ease-in-out 3 alternate;/*alternate:表示从from-to,然后又从to-from，来回往返*/
/*-webkit-animation:example 4s 1s ease-in-out 3;
-moz-animation:example 4s 1s ease-in-out 3;*/
position:relative;
} /*定义关键帧*/
@keyframes example { /*from {background-color:green;left:0;top:0;}
to {background-color:blue;left:80%;top:0;}*/
0% {background-color:green;left:0;top:0;}
25% {background-color:blue;left:80%;top:0;}
50% {background-color:blue;left:80%;top:300px;}
75% {background-color:blue;left:0;top:300px;}
100% {background-color:blue;left:0;top:0;} } /*低版本谷歌浏览器私有关键帧*/
@-webkit-keyframes example1{ } /*低版本Mozilla Firefox浏览器私有关键帧*/
@-moz-keyframes example2{ }
</style>
</head>
<body>
<div class="animation"> </div>
</body>
</html>
【CSS】元素样式的更多相关文章
- css中的字体样式及元素样式
css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...
- CSS元素、边框、背景、列表样式
一.元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距 内容与边框之间的距离 4.margin控制元素外边距 元素边框与其他元素边框之间的距离,如果两 ...
- css:hover状态改变另一个元素样式的使用
效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...
- DOM访问元素样式和操作元素样式
在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表).使用<style/>元素定义嵌入式样式(嵌入式样式表).使用style特性定义针对特定 ...
- css初始化样式代码
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- JQuery_元素样式操作
元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握. 一.css()方法 ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- 第 19 章 CSS 其他样式
学习要点: 1.颜色和透明度 2.盒子阴影和轮廓 3.光标样式 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 其他剩下几个常用的样式,包括颜色.透明度.盒子的阴影轮廓以及光标的样式. 一．颜 ...
随机推荐
- HelloWorld.php
没有写博的习惯,从今天开始.近期学习了下php,分享下我的第一个PHP. 工具:Hbuider+Wampserver 利用Wampserver就可以完成PHP脚本的编写和运行,本人之所以选择安装HBu ...
- 【软件工程Ⅱ】作业四 |个人项目-小学四则运算 “软件”之初版(C语言)
本次作业的要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2186 本次作业代码的github地址:https://gith ...
- PAT 1022 D进制的A+B
https://pintia.cn/problem-sets/994805260223102976/problems/994805299301433344 输入两个非负10进制整数A和B(<=2 ...
- HDU 2024 C语言合法标识符
http://acm.hdu.edu.cn/showproblem.php?pid=2024 Problem Description 输入一个字符串,判断其是否是C的合法标识符. Input 输入 ...
- MYSQL jdbc autoReconnect
http://blog.csdn.net/a9529lty/article/details/7104351 http://blog.163.com/huangfei_person/blog/stati ...
- Appium学习笔记2_Android获取元素篇
在利用Appium做自动化测试时,最重要的一步就是获取对应的元素值,根据元素来对对象进行对应的操作,如果获得对象元素呢? Appium Server Console其实提供了一个界面对话框" ...
- OA与BPM的区别
BPM OA 软件架构 JAVA..NET.基于SOA架构 JAVA..NET.PHP.Domino 驱动模式 流程驱动 文档驱动 交互 人与人,人与系统,系统与系统 人与人 软件功能 ...
- Test Scenarios for image upload functionality (also applicable for other file upload functionality)
1 check for uploaded image path2 check image upload and change functionality3 check image upload fun ...
- BZOJ1047[HAOI2007]理想的正方形——二维ST表
题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入 第一行为3个整数,分别表示a,b,n的值第二行至第a+1行每行为b个非 ...
- BZOJ1146[CTSC2008]网络管理——出栈入栈序+树状数组套主席树
题目描述 M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个 部门之间协同工作,公司搭建了一个连接整个公司的通信网络.该网络的结构由N个路由器和N-1条 ...