css
css简介
CSS(层叠样式表)用来规定HTML文档的展现形式
- CSS的定义和应用样式:
CSS属性和值用冒号分隔,每条样式结束后必须加分号;
color:red;
↓ ↓
属性 值
声明
选择器
Class选择器:
用来将元素归类,为了能找出文档的某一类元素或给某一类元素应用样式
选择器则前面加 .
Id 选择器:
给元素指定一个唯一的标示符,这种标示符也是获取该元素或应用样式,在选择器前面加 #
通配符: *
style确定样式
.+class的值,表示选定class
<head>
<meta charset="utf-8" />
<meta name="keyword" content="" />
<meta name="description" content="" />
<title>CSS层叠样式表</title>
<style type="text/css">
p{
color:red;
}
.text {
color:skyblue;
}
</style>
</head>
<body>
<p> CSS样式调整</p>
<p class="text"> 生活是幸福的!!!</p>
</body>
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CMxleV3y-1577065561406)(http://img0.ph.126.net/CiTZSYmFAhK1_6j1x2dM_w==/6632508125935253175.png)]
style样式,按自上而下的代码顺序执行,如果多次赋值相同的样式属性,按最后一次效果执行
id选择器只能写一次,class选择器可以写很多次
<style type="text/css">
#content{
color:green;
}
.text {
color:skyblue;
}
p{
color:red;
}
</style>
</head>
<body>
<p> CSS样式调整</p>
<p class="text"> 生活是幸福的!!!</p>
<p class="text"> 生活是幸福的!!!</p>
<p id="content" class="text"> 生活是美好的!!!</p>
<p id="aaa"> 生活是美好的!!!</p>
样式使用优先级
id样式 > class样式 > 通用标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tHGKMlSn-1577065561407)(http://img1.ph.126.net/noFvp-FWL9URhgU2f3tliQ==/6632651062444268104.png)]
style内敛样式
加在标签处
<p style="background:yellow" class="text"> 生活是苦涩的!!!</p>
style最常用样式 link标签
- rel属性
值 | 描述 |
---|---|
alternate | 文档的外部样式表。 |
stylesheet | 文档的外部样式表。 |
start | 集合中的第一个文档。 |
next | 集合中的下一个文档。 |
prev | 集合中的前一个文档。 |
contents | 文档目录。 |
index | 文档索引。 |
glossary | 文档中所用字词的术语表或解释。 |
copyright | 包含版权信息的文档。 |
chapter | 文档的章。 |
section | 文档的节。 |
subsection | 文档的子段。 |
appendix | 文档附录。 |
help | 帮助文档。 |
bookmark | 相关文档。 |
link标签引用样式
<link rel="stylesheet" type="text/css" href="css样式link.css">
CSS的写法:
@charset "UTF-8";
/**
*
* @authors Your Name (you@example.org)
* @date 2018-01-11 00:02:55
* @version $Id$
*/
body {
background:pink;
}
如果样式风格三种模式存在同一个HTML模式中
1.head 中style模式
2.标签元素中style=""属性模式
3.link中rel="stylesheet"模式中
按html顺序执行
sytle选择器
- 直接标签选择 p {color:red;}
- class选择器 以.调用class
class=“text”
.text
{size=10; face=“楷体”’’} - id选择器 以#调用id(每个html页面id名字仅能出现一次)
id=“identified”
#identified
{background:pink;}
link引用shortcut icon
shortcut icon
用于网页标签栏的图标
<link rel="shortcut icon" href="study.ico">
效果图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ifPENcgV-1577065561407)(http://img1.ph.126.net/V0JWxIj-CuvRjiI2CjmFdQ==/6632545509330603487.png)]
注意:icon图标可以百度找到
css样式更改
px:像素
em:相对单位
文本颜色:color:red;
背景颜色:background:gray
字符间距:letter-spacing:2em letter-spacing:10px(字与字相隔10像素) 注意:letter-spacing基本不用
空格间距:word-spacing 仅针对空格有效果
行 间 距:line-height:14px
文本对齐:text-align:center / left / right
text-align属性
值 | 描述 |
---|---|
left | 把文本排列到左边。默认值:由浏览器决定 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
文本缩进:text-indent:2em (用于首行缩进)
ps: 单位em是相对于字体大小而定的,是个相对单位
- 装饰文本
text-decoration文本装饰:
值 | 解释 |
---|---|
none | 默认的一个文本(无样式) |
underline | 下划线 |
overline | 上划线 |
line-through | 定义一个从中间穿过的线(中划线) |
a标签的下划线是默认样式underline
- 字体样式
文字大小:font-size:14px
文字字体:font-family:”微软雅黑”
文字风格:font-style:normal / italic
属性:
normal:默认值
italic:显示一个斜体
-
文字加粗样式
font-weight 设置文本字体的粗
值:
normal:默认字符
bold:定义默认粗体数值:
100 100-300 细体
…… 400-500 默认
900 600-900 粗体
400等于normal,而700等同于bold
默认为400
背景颜色
可以进行url链接
<style type="text/css">
body{
background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515666773485&di=fffdfca495d0d9b7a31825a7a8115e56&imgtype=0&src=http%3A%2F%2Fspecial.yunnan.cn%2F2008page%2Fent%2Fimages%2Fattachement%2Fjpg%2Fsite2%2F20170510%2F002324a0b89c1a7d71a263.jpg");
}
</style>
background图片没有找到,浏览器页面不会报错
背景颜色:background-color
背景图像:background-image
背景大小:background-size
图像填充:background-repeat
图像定位:background-position 值:x,y
background-image:给背景定义一个图像
background-image:url(“”);
background-repeat:图像以什么方式重复
repeat :以平铺方式重复图像(默认)
repeat-x :以x水平方向重复图像
repeat-y :以y垂直方向重复图像
no-repeat:不重复(填充)
background-size: 100% auto;
background-size: 500px 600px;
背景拉伸问题
body写在html里面,需要对html拉伸
html,body{
height: 100%
width:100%;
}
简写方式:
background-image:url(“”);
background-repeat:图像以什么方式重复
可以将多个参数值写在一起,支持IE9以上浏览器
div{
background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515666773485&di=fffdfca495d0d9b7a31825a7a8115e56&imgtype=0&src=http%3A%2F%2Fspecial.yunnan.cn%2F2008page%2Fent%2Fimages%2Fattachement%2Fjpg%2Fsite2%2F20170510%2F002324a0b89c1a7d71a263.jpg") no-repeat;
}
图像定位:
border边框线
<style type="text/css">
div {
height:30px;
widht:20px;
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515669529529&di=2d4f4024a0deb43907d035f48b22b4fe&imgtype=0&src=http%3A%2F%2Fwww.feizl.com%2Fupload2007%2F2015_06%2F150628005668176.jpg");
background-repeat: no-repeat;
background-position: -100px 10px;
border:1px solid red;
}
</style>
ul无序列表去除小黑点
list-type: none;