前端之css的基本使用（一），行内、内部、外部样式，语法格式、注释、选择符、属性等
一、行内、内部、外部样式
1、行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background-color: orange;color: red;">
<h1 style="border: 1px solid #ccc;">网页的内容</h1>
</body>
</html>
2、内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: orange;
}
h1{
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>网页的内容</h1>
</body>
</html>
3、外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<h1>网页的内容</h1>
</body>
</html>
导入的.css文件
body{
background-color: orange;
}
h1{
color: red;
}
二、语法格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{ background-color: blue; color: white;}
</style>
</head>
<body>
<h1>网页的内容</h1>
</body>
</html>
三、注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
多行注释, 这里的内容就不会被显示或者不会被浏览器执行.
*/
body{
background-color: #7cffa7; /* 背景-颜色: 蓝色; */
color: white; /* 字体颜色: 白色; */
font-size: 100px; /* 字体-大小: 100像素; */
}
h1{
background-color: white;
border-radius: 32px;
}
</style>
</head>
<body>
<h1>网页的内容</h1>
</body>
</html>
四、选择符
1、万能选择符
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: #cccccc;
}
* { /* 代表网页中的所有元素 */
color: blue;
}
li{
background-color: wheat;
}
</style>
</head>
<body>
<h1>静夜诗</h1>
<p>
床前明月光,<br>
疑是地上霜.<br>
....
</p>
<ul>
<li>第1个li选项</li>
<li>第2个li选项</li>
</ul>
</body>
</html>
2、标签选择符
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: #cccccc;
}
p { /* 通过标签名来控制指定哪些标签的外观效果,这就是标签选择符 */
font-size: 26px;
}
</style>
</head>
<body>
<h1>静夜诗</h1>
<p>
床前明月光,<br>
疑是地上霜.<br>
....
</p>
<p>
另一个段落
</p>
</body>
</html>
3、id选择符
!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#p1{ /* 告诉浏览器找到id值为p1的标签,给它加上外观样式 */
color: orange; /* 颜色: 橙色 */
font-size: 32px; /* 字体-大小: 32像素; */
}
#h2{
color: blue;
}
</style>
</head>
<body>
<h1>静夜诗</h1>
<p>
床前明月光,<br>
疑是地上霜.<br>
....
</p>
<p id="p1">
另一个段落
</p> <h2 id="h2">h2标题</h2>
</body>
</html>
4、class选择符
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c1{ /* 指定具有class属性值为c1的所有的标签的样式 */
color: blue;
}
.p1{
font-size: 32px;
}
.p2{
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li></li>
</ul>
<h1>静夜诗</h1>
<p class="p2">
床前明月光,<br>
疑是地上霜.<br>
....
</p> <p class="c1 p1 p2" id="c1">另一个段落</p>
<h2 class="c1">h2标题</h2>
<p class="c1 p1">还有一个段落</p>
</body>
</html>
5、包含选择符
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box p{ /* div元素包含的所有的p元素 */
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<p>这是一个网页</p>
<div class="box">
<p>这里也有一个段落</p>
<p>详情请点击<a href="">了解更多</a></p>
</div>
</body>
</html>
6、父子选择符
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.header p{ /* class=headers的元素里面所有的子标签p或者孙子标签p... */
background-color: #ccc;
color: blue;
}
.header>p{ /* class=header的元素的子标签p */
color: red;
}
</style>
</head>
<body>
<div class="header">
<div class="header-left">
<p>页面的左边</p>
</div>
<p>中间的一段文本</p>
<div class="header-right">
<p>页面的右边</p>
</div>
</div>
</body>
</html>
7、兄弟选择符
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#three+li{ /* id=three的下一个标签叫li的,如果下一个标签不叫li或者不是指定的选择符,则样式的修改无效 */
color: red;
}
#three~.a1{/* id=three的后面所有class=a1的兄弟元素 */
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>第1个li元素</li>
<li>第2个li元素</li>
<li id="three">第3个li元素</li>
<li>第4个li元素</li>
<li class="a1">第5个li元素</li>
<li>第6个li元素</li>
<li class="a1">第7个li元素</li>
</ul>
</body>
</html>
8、属性选择符
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input[type]{ /* 控制所有具有type属性的input元素 */
outline: none;/* 去除外边线 */
}
input[type=text]{ /* 控制所有type="text"的input元素 */
color: red;
}
</style>
</head>
<body>
用户名: <input type="text" name="" /><br>
昵称: <input type="text" /><br>
密码: <input type="password" /><br>
性别: <input type="radio" name="">男
</body>
</html>
9、伪类选择符
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
color: blue;
}
a:hover{ /* 当标签处于被鼠标悬浮的时候 */
color: #7cffa7;
}
a:nth-child(1){/* 处于第一个位置的子元素 */
color: red;
}
a:last-child{
color: red;
}
.list1 li:nth-child(odd){ /* odd排名在奇数位置的li标签 */
background-color: red;
}
.list1 li:nth-child(even){
background-color: blue;
}
.last2 li:nth-child(3n-2){
background-color: red;
}
.last2 li:nth-child(3n-1){
background-color: green;
}
.last2 li:nth-child(3n){
background-color: blue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com/">老男孩</a><br>
<a href="http://www.baidu.com/">老男孩</a><br>
<a href="http://www.baidu.com/">老男孩</a><br>
<a href="http://www.baidu.cn/">老男孩</a>
<ul class="list1">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul class="last2">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>
10、伪对象选择符
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.price{
color: red;
}
.price::before{
content: "<<";
color: blue;
}
.price::after{
content: ">>";
color: blue;
}
.price::selection{
background-color: red;
color: orange;
}
</style>
</head>
<body>
<span class="price">价格</span>
</body>
</html>
五、基本属性
1、文本属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.center{
text-align: center;
}
.left{
background-color: red;
text-align: left;
text-indent: 10px;
}
.right{
background-color: red;
text-align: right;
}
.p1{
letter-spacing: 3px; /* 文本中字符之间的距离 */
}
.p2{
text-decoration: line-through; /* 下划线 */
}
.p2 img{
vertical-align: middle; /* 在图片和文本进行组合排版的时候,用于指定图片在垂直方向的对齐方式 */
}
a{
text-decoration: none; /* 去掉a标签默认的下划线 */
}
.p3{
line-height: 32px; /* 文本的行高 */
}
</style>
</head>
<body>
<p class="left">这是一段很长的的很长的告白!!!!</p>
<p class="center">这是一段很长的的很长的告白!!!!</p>
<p class="right">这是一段很长的的很长的告白!!!!</p>
<p class="p1">这是一段很长的的很长的告白</p>
<p class="p2">百度 <img src="./image/icon.png" alt=""><a href="">百度</a></p>
<p class="p3">
一段文本 <br>
一段文本 <br>
一段文本 <br>
一段文本 <br>
</p>
</body>
</html>
2、字体属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
font-size: 32px;
color: red;
font-weight: bold; /* 字体加粗 */
}
.p1{
font-family: "微软雅黑";
}
.p2{
font-family: "宋体";
font-style: italic; /* 字体倾斜, normal表示正常,不倾斜 */
}
.p3{
font: italic bold 32px "宋体"; /* 简写: 加粗 字体大小 字体族 */
}
</style>
</head>
<body>
<p class="p1">这是一段很长的的很长的告白!!!!</p>
<p class="p2">这是一段很长的的很长的告白!!!!</p>
<p class="p3">这是一段很长的的很长的告白!!!!</p>
</body>
</html>
3、边框属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.p1{
/*border-left-color: red; !* 左边边框颜色: 红色; *!*/
/*border-left-width: 2px; !*左边边框宽度: 2像素; *!*/
/*border-left-style: solid; !* 左边边框样式: 实线 *!*/ /*border-color: blue red; !* 上下边框颜色: 蓝色 左右边框: 红色; *!*/
/*border-width: 2px 4px; !*上下边框宽度: 2像素; 左右边框: 4像素 *!*/
/*border-style: solid dashed; !* 边框样式: 上下实线 左右虚线; *!*/ /*border-color: red blue black; !* 边框颜色: 上红色 左右蓝色 下黑色 ; *!*/
/*border-width: 2px 4px 10px; !*边框宽度: 上2px 左右4px 下10px*!*/
/*border-style: solid dashed dashed; !* 边框样式: 上实线 左右下都是虚线; *!*/ /*border-color: red blue black orange; !* 边框颜色: 上红色 右蓝色 下黑色 左橙色; *!*/
/*border-width: 2px 4px 10px 5px; !*边框宽度: 上2px 右4px 下10px 左5px*!*/
/*border-style: solid dashed dashed solid; !* 边框样式: 上实线 右下都是虚线 左实线; *!*/ border: 1px solid black; /* 四条边框统一1px 实线 黑色 */
}
</style>
</head>
<body>
<p class="p1">这是一段很长的的很长的告白!!!!</p>
</body>
</html>
4、背景属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.p1{
background-color: orange;
border-radius: 13px; /* 边框圆角 */
}
img{
background: #000;
border-radius: 12px;
}
body{
/*background-image: url("./image/timg.jpg"); !* 背景图片,必须使用url进行指定,而且只能是相对于当前url所在的文件 *!*/
/*background-size: 500px 600px; !*背景大小 宽度500px 高度600px*!*/
/*background-repeat: no-repeat;!* 不平铺 *!*/
/*!*background-repeat: repeat-x;!* x轴平铺 *!*!*/
/*!*background-repeat: repeat-y;!* y轴平铺 *!*!*/
/*!*background-repeat: repeat;!* 默认 平铺 *!*!*/
/*!* 在背景如果不平铺的情况,可以选择让背景位置移动 *!*/
/*background-position: 100px -300px; !* 背景定位: 距离左边的位置100px 距离顶部的位置-300px *!*/
/*background-color: #bbbbbb; !* 背景颜色 *!*/
/* 缩写 */
/*background: 背景颜色 背景图片 背景位置/背景大小 背景平铺方式;*/
background: url("./image/timg.jpg") #bbbbbb 100px 300px/100px 200px no-repeat;
}
</style>
</head>
<body>
<p class="p1">这是一段很长的的很长的告白!!!!</p>
<img src="./image/icon.png" alt="">
</body>
</html>
5、边距属性（一）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: blue;
margin-bottom: 20px; /* 距离下方元素的边距: 20px; */
}
.box2{
width: 100px;
height: 100px;
background-color: red;
margin-top: 20px; /* 距离顶部元素的边距: 20px; */
}
.img1{
background-color: orange;
}
.img2{
background-color: red;
}
.img1{
margin-right: 10px; /* 距离右边元素的边距: 10px; */
}
.img2{
margin-left: 10px; /* 距离左边元素的边距: 10px */
}
</style>
</head>
<body>
<div class="box1">
<div class="son"></div>
</div>
<div class="box2"></div> <img class="img1" src="./image/icon.png" alt=""><img class="img2" src="./image/icon.png" alt="">
</body>
</html>
6、边距属性（二）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 300px; /* 元素宽度 */
height: 300px; /* 元素高度 */
background-color: orange;
padding-top: 10px;/* 设置内部元素距离当前元素的顶部之间的空白高度 */
padding-left: 20px; /* 设置内部元素距离当前元素的左边之间的空白高度 */
}
.son{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="son"></div>
</div>
</body>
</html>
前端之css的基本使用（一），行内、内部、外部样式，语法格式、注释、选择符、属性等的更多相关文章
- css块级标签，行内标签，行内块标签的转换（2）
css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...
- CSS块级元素与行内元素
CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性. 行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...
- [转]CSS块级元素和行内元素
原地址:http://www.studyofnet.com/news/398.html 本文导读:HTML中的元素可分为两种类型:块级元素和行级元素.这些元素的类型是通过文档类型定义(DTD)来指明. ...
- 02 CSS块级元素和行内元素
02 CSS块级元素和行内元素 划分依据:根据标签内部可以存放的元素内容不同进行划分,它与CSS样式无关. 要先了解这个 得先了解 什么是容器级别的标签和文本级? 容器级标签 什么是容器级标签? 内部 ...
- CSS HACK tab制表符导致行内元素之间的空隙如何解决
<!DOCTYPE html> <html lang="zh-CN"><head> <meta name="viewport&q ...
- css块级元素、行内元素
说说对html页面元素的排列认识: html中所有元素从上到下排列,所以需要css来对其中的元素进行排序.调节样式,并用js为其添加交互效果. css的排序.定位是相对块级元素而言的,margin/p ...
- CSS块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- css块级元素和行内元素详细解析
块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div p form ul ol li 等: 常见的行内元素:span stronh em; ...
- css块级标签、行内标签、行内块级标签
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
- css position 和 块级/行内元素解释
一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保 ...
随机推荐
- js 正则匹配 两个字符串之间，某个字符串之前（之后）的内容
1.js截取两个字符串之间的内容: var str = "aaabbbcccdddeeefff"; str = str.match(/aaa(\S*)fff/)[1]; alert ...
- JDK自带的native2ascii工具介绍
背景:在做Java开发的时候,常常会出现一些乱码,或者无法正确识别或读取的文件,比如常见的validator验证用的消息资源(properties)文件就需要进行Unicode重新编码.原因是java ...
- springBoot中使用使用junit测试文件上传，以及文件下载接口编写
本篇文章将介绍如何使junit在springBoot中测试文件的上传,首先先阅读如何在springBoot中进行接口测试． 文件上传操作测试代码 import org.junit.Before; im ...
- 备战省赛组队训练赛第五场(UPC)
中石油比赛链接 CF题目链接 E:博客 G:李继朋 博客 H:苗学林 贺振原 J:博客 苗学林 机房白给队全方位题解:A B E G I J
- dotnet 数组自动转基类数组提示 Co-variant array conversion 是什么问题
在 C# 的语法,可以提供自动将某个类的数组自动转这个类的基类数组的方法,但是这样的转换在 Resharper 会提示 Co-variant array conversion 这是什么问题? 在 C# ...
- 使用Squid做代理服务器,Squid单网卡透明代理配置详解(转）
使用Squid做代理服务器 说到代理服务器,我们最先想到的可能是一些专门的代理服务器网站,某些情况下,通过它们能加快访问互联网的速度.其实,在需要访问外部的局域网中,我们自己就能设置代理,把访问次数较 ...
- 复盘：错误理解zuul路径匹配，无法使用zuul
场景: 项目中用到zuul时,配置url总是有问题,无法路由到对应微服务. 配置如下: zuul: routes: m2-member: path: /member/* serviceId: m2-m ...
- Linux 学习笔记 4 创建、复制、移动、文件的基本操作
写在前面 通过上一节的学习,我们基本的了解到在Linux 里面对于设备的挂载.卸载以及设备存在的目录.挂载目录.都有了一个基本的了解 本节主要了解文件.以及目录的相关操作,比如文件.目录的创建.以及删 ...
- 洛谷$1156$ 垃圾陷阱 $dp$
\(Sol\) \(f_{i,j}\)前\(i\)个垃圾,能活到时间\(j\)的最高垃圾高度.\(t_i\)表示第\(i\)个垃圾掉落的时间,\(g_i\)表示吃垃圾\(i\)能维持的时间,\(h_i ...
- Theia——云端和桌面版的IDE
Theia是一个利用最新的web技术开发的支持云端和桌面运行的类似IDE的产品,它是一个可扩展的平台,并且全面支持多语言. 目标 建立一个可搭建类似IDE产品的平台 为终端用户提供完整的多语言IDE( ...