CSS样式
Posted Jessica巨人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS样式相关的知识，希望对你有一定的参考价值。
背景（background）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body
background-color: transparent;
.one
width: 500px;
height: 500px;
background-color: aqua;
</style>
</head>
<body>
<!-- <img src="img/luoyi.jpg" align="top" width="100%" /> -->
<div class="one">
1
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body
background-color: transparent;
.one
width: 1500px;
height: 2000px;
background-color: aqua;
background-image: url(img/luoyi.jpg);
background-repeat: no-repeat;
/* background-position: inherit; */
background-position: 30px 10px;
background-attachment: scroll;
/* background-attachment: fixed; */
.two
</style>
</head>
<body>
<!-- <img src="img/luoyi.jpg" align="top" width="100%" /> -->
<div class="one">
12345678
</div>
<div class="two">
12345678
</div>
</body>
</html>
Text(文本)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div
text-indent: 30px;
text-align: center;
text-decoration: overline;
text-shadow: black;
color: cornflowerblue;
text-decoration: blink; /*文本闪烁*/
text-decoration: line-through;/*删除*/
p
text-transform: capitalize;
letter-spacing: 20px;
</style>
<title></title>
</head>
<body>
<div>R技术发展到现在，真实空间还原始终是比较麻烦的事情，之前的识别图只能通过特定图片寻找到虚拟和真实的交界。这对用户来说体验感是远远不够的。虚拟的模型想要在真实的世界中更加完美呈现，一是关照效果阴影的体现，还有更重要的就是遮挡关系，物理阻挡的体现。如果可以多人共享一个虚拟空间，那么真实感就会更加完美了。这就是Hololens的MR了。————————————————版权声明：本文为CSDN博主「笔端的年华」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/BDDNH/article/details/104673717</div>
<p>R技术发展到现在，真实空间还原始终是比较麻烦的事情，之前的识别图只能通过特定图片寻找到虚拟和真实的交界。这对用户来说体验感是远远不够的。虚拟的模型想要在真实的世界中更加完美呈现，一是关照效果阴影的体现，还有更重要的就是遮挡关系，物理阻挡的体现。如果可以多人共享一个虚拟空间，那么真实感就会更加完美了。这就是Hololens的MR了。
————————————————版权声明：本文为CSDN博主「笔端的年华」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/BDDNH/article/details/104673717</p>
</body>
</html>
仅html就可以做网页，放你想放的任何东西，但是不美观
让他美观的话，就需要层叠样式表css css3
css是做什么的？
1.控制整个网页的布局，在布局的基础上再好看，跟html里的table似的。比如房子的三室一厅，阳面阴面，再放家具装修。
2.控制网页的样式 字体、图片的位置，大小，加粗，颜色等等，跟html里的“属性”一样。
布局方式：
1.Table(基本上不用这个)
2.div+css(项目中常用)
块标签：
可以作为容器包纳html的标签（标题，表格，图片等html元素）。内联标签（行内标签）：
div和span标签单独用没效果和影响，和放在外面一样显示，得需要通过css来控制。
<body>
<p>我是一个身体1</p>
<p>我是一个身体2</p>
<p>我是一个身体3</p>
<div>我是个块标签1<h4>这是个标题</h4></div>
<div>我是个块标签2</div>
<div>我是个块标签3</div>
<span>我是一个spans1</span><br />
<span>我是一个spans2</span>
<span>我是一个spans3</span><br />
</body>
复杂的动画效果，如图片轮播切换是用js做的。
块元素：单独占一行
行内元素：手动换行的/把页面充满自动换行
![]()
<input type=“text” / >
在哪写css代码：
写标签的属性
1.内部引入方式
2.行内引入
会导致代码臃肿，每个标签里还会有一堆样式代码不好不好。
我是一个spans1
3.会写很多样式文件的,外部引入（项目用）
new_file.html
new_file.css
div
font-size: 21px;
font-family: “楷体”;
会出现一个标签会被多个css控制，出现冲突
css里的注释
/*
*/
html里的注释
标签选择器
div类选择器:class可以指给多个标签
.one
id选择器：ID是唯一的不可以重名。
#heard选择器变形
我是个div我是个p
div p后代选择器
我是个div我是个p我是一个span
div p spanid选择器>类选择器>标签选择器
群组选择器:几个都有共同属性部分的时候
div,span,p
全局选择器：把标签里的都选进去
*
属性选择器
input[type=‘text’]
background-color:yellow;
伪类选择器：用伪类控制四个状态的样式
a:link
a：hover
a:active
a：visited
go百度
一个网页有四种状态
1.正常状态 2.鼠标移上去 3.鼠标按下不抬起 4.被点击过，被打开过
点开后链接就会换颜色，告诉已经被打开过了
结合类使用的伪类
one:link
结合标签使用的伪类
img:link
width:300px;//鼠标移上去图片放大
div:first-child
color:blue;
span:first-child
css背景图
body
background-color:transparent;
.one
width:800px;
height:500px;
background-image:url(img/api.jpg);
background-repeat:no-repeat;//垂直水平方向平铺
background-position:left;
background-position:30px 10px;//从哪个位置开始加载
background-attachment:fixed;//滚动时
css设置文本
p
text-indent:2em;//字体大小设置
text-align:left;//对齐方式
word-spacing:10px//字间距,只设置单词之间的间距，不设置中文的
text-decoration:underline;
line-height:30px;
啦啦啦啦
css设置字体
p.
font-style:normal;//正常 - 正常显示文本
font-style:italic;//斜体 - 以斜体字显示的文字
font-style:oblique;//倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
啦啦啦啦
ul
list-style-type:none;
ol
list-style-type:lower-roman;//罗马数字
list-style-type:lower-alpha;//小写数字
list-style-image:url(img/html01.jpg);//有序代替成图片
list-style-position：outside;//靠里靠外
- af
- af
- af
- af
- af
- af
单位
百分比
像素
厘米
英寸
盒子模型
用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
div
width: 300px;
height:300px;
border: 25px solid green;//Border(边框) - 围绕在内边距和内容外的边框。
padding: 25px;//Padding(内边距) - 清除内容周围的区域，内边距是透明的。
margin: 25px; //Margin(外边距) - 清除边框外的区域，外边距是透明的。
margin: 0 auto;//左右居中
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
padding:10px 10px 10px 10px;上下左右内边距
css定位
定位机制
1.普通文档流
默认就是这个，从上到下排列去堆叠，不去做设置。
默认就是静态定位，就是普通文档流的形式。
.one
position:staic;
2.浮动
通过浮动来解决把格子放在一行这个问题。
清除浮动影响clear，只需要做一次浮动清除。
3.绝对定位
是相对于最近的已定位的父物体标签去计算的，父物体是body，body相当于浏览器
.three
position:absolute;
top:20px;
left:10px;
width:100px;
4.相对定位
相对于自己原来的位置。原来的框还在文档流里面占有空间。
.two
position:relative;
5.固定定位
是相对于整个浏览器来说的，其他的都不管
.three
position:fixed;
---居家优品---
1 2 3.title
text-align: center;
font-family: “微软雅黑”;
color: #222;
.container
width: 1190px;
height: 450px;
background-color: #00FFFF;
margin: 0 auto;
body
background-color: #f0f3ef;
margin: 0rem;
padding: 0rem;
.left,.center,.right
width: 370px;
height: 450px;
float: left;
margin: 10px;
background-color: white;
.left,.center
margin-right: 10px;
以上是关于CSS样式的主要内容，如果未能解决你的问题，请参考以下文章
CSSCSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )