目录
前言
需要前置知识 html基础 https://blog.csdn.net/yzj17025693/article/details/94871395
css基础二 https://blog.csdn.net/yzj17025693/article/details/95038211
字体样式属性
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
/*修改颜色 */
color: green;
/*修改字体大小 */
font-size: 50px;
/*修改字体为微软雅黑 */
font-family: "Microsoft YaHei UI";
/*文字加粗,还可以写数字,900封顶 */
font-weight: bold;
/*字体倾斜,normal默认正常 */
font-style: italic;
/*
简写font: 倾斜 加粗 大小 字号
简写下大小和字号必须要保留,前面2个不写没关系
*/
/*font: italic bold 100px "Microsoft Himalaya";*/
/*去掉a标签的下划线*/
text-decoration: none;
}
</style>
</head>
<body>
<a>哈哈1</a>
</body>line-height可以让文字垂直居中
当文字在块元素里,可以把行高设置成块元素的高度,不过这个块里的文字只能有一行
至于为什么,可看 https://zhidao.baidu.com/question/555762734.html
相当于是 文字的实际高度(20px)+行高(50px),超过了块元素(px)的大小,这时候浏览器就把剩下的30px分成2份
15px补在文字上方,15px不再文字下方,正好居中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
/*行高*/
line-height: 25px;
/*水平对齐方向*/
text-align: left;
/*首行缩进,1em是一个汉字的宽度*/
text-indent: 2em;
}
div{
/*字间距*/
letter-spacing: 2px;
}
span{
/*单词间距,只能针对英文*/
word-spacing: 30px;
}
h1{
/*rgba后面的a是alpha,代表透明度*/
color: rgba(0,0,0,0.2);
}
h2{
/*文字阴影的4个参数*/
/*水平位置(必写),垂直位置(必写),模糊距离,阴影颜色*/
text-shadow: 2px 3px 4px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈哈哈哈</p>
<p>fffffffffffffffffffff</p>
<div>是是是试试所</div>
<span>this is word</span>
<h1>半透明效果</h1>
<h2>文字阴影</h2>
</body>文字的突起和凹陷
写2组阴影即可
CSS的选择器
类选择器可以被多次使用,因为class可以重名
而id选择器不能,因为id是唯一的
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器*/
p{
color: green;
}
/*类选择器,根据class选择*/
.two{
color: red;
}
.three{
font-size: 50px;
}
/*id选择器*/
#four{
font-style: italic;
}
</style>
</head>
<body>
<p>哈哈1</p>
<p class="two">哈哈2</p>
<!-- 多类选择-->
<p class="two three">哈哈3</p>
<div id="four">哈哈4</div>
</body>伪类选择器
伪类选择器并不只有a标签可以使用
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
伪类选择器
link为未访问
visited为已访问
hover为鼠标移动到链接上
*/
a:link{
color: blue;
font-size: 20px;
}
a:hover{
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<div><a href="#">点击</a></div>
</body>css3新伪类选择器
first-child
会改变第一个li的样式
nth-child可以选择指定的子元素,括号里是第几个元素
隔行选取
css复合选择器
属性选择器
后代选择器,能选中所有后代
css样式
<div style="color: red">内联样式</div>
css背景
image必须要写url
repeat是平铺,如果div过大,而图片大小不够,就会重复出现这个图片
背景位置
X是横轴,Y是纵轴
固定背景图片,这样我们滚动页面,背景不会跟着走
background简写,其中所有都是可选,但是背景位置不能拆开放
背景图片缩放
多张背景图片
css的特性
css的层叠性
当出现了2个同属性,以css书写顺序为主,最后出现的blue,所以是blue
但是这是在相同选择器的情况
css的优先级
下面还是blue
选择器不同的情况,权重不同
权重
权重越大的,样式谁说了算
虽然!important的权重是无限大,但是它没有继承性,也就是说如果我们选择的是父元素上加上!important
但是实际需要改变的是子元素,这时候选取父元素加上!important对子元素是没有影响的
权重可叠加
下面这种情况
第一个可以排除
第二个和第三个的权重是相等的,这时候就需要看书写顺序了,所以最后是yellow
