文章目录
一、字体与文本属性
1. 字体
-
font-family:设置文本字体
一般情况下,若字体由多个单词组成,加引号。字体之间用逗号隔开body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
-
font-size:字体大小
通过body可以指定整个页面文字的大小,但是某些标签(标题h)的文字大小需要单独设置(因为存在样式覆盖,具体看CSS的三大特性后续补充对应博客链接)font-size: 15px 注意单位是像素px
-
font-weight
实际开发中,更常采用数字设置粗细属性 描述 normal 默认值(不加粗的) bold 定义粗体(加粗的) 100-900 400等同于normal,而700等同于bold,注意数字后面不跟单位 -
font-style:文字风格
平时很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体font-style:italic // normal:默认值; italic:设置斜体
-
字体综合属性font
上述文字设置可以综合起来写font: font-style font-weight font-size/line-height font-family;
注:font里各属性顺序不能换,各属性之间空格隔开; 不需要设置的属性可以不写, 但font-size和font-family必须都写,否则font属性不起作用(只写font-size或font-family也会不起作用)
2. 文本
-
color:文本颜色
预定义的颜色值(blue)/ 十六进制(#ffffff) / rgb(255,0,0) -
text-align: 文本内容水平对齐方式
text-align:center;
left:左对齐(默认值)
center:居中对齐
right:右对齐 -
text-decoration:装饰文本
div{ text-decoration:underline // 加下划线 text-decoration:none // 默认,没有装饰 text-decoration:line-through // 加删除线 }
-
text-indent:文本缩进
用来将段落首行缩进,单位为em。
em是一个相对单位,就是相对于当前1个文字的大小。若文字大小为16px,则1em为缩进16px,若文字大小为20px,则1em缩进20px -
line-height:设置行高(行间距),控制文字行与行之间的距离
上间距 = 下间距 = (行高-文本高度)/2
应用:单行文字垂直居中
设置line-height=height即可,当行高等于盒子高度时,上下间距把文字挤到中间了。
如果行高小于盒子高度,文字会偏上(文字本身高度是不变的),如果行高大于盒子高度,则文字偏下。
二、选择器
选择器分为基础选择器、复合选择器;
选择器练习网址:CSS Diner
CSS3还新增了其他选择器,后续补充对应博客链接
1. 基础选择器
标签选择器、类选择器、id选择器、通配符选择器
1.1 标签选择器
能快速为页面中同类型的标签统一设置样式
标签名{
属性1: 属性值1;
属性2: 属性值2;
...
}
1.2 类选择器
差异化选择一个或某几个标签,可使用类选择器
.类名{
属性1:属性值1;
...
}
- 类名若由多个单词组成,则可使用中横线来连接单词;
- 一个标签可有多个类名,类名与类名之间用空格分隔;多类名可以节省css代码,也方便统一修改
<style>
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
<body>
<div class="red box">box1</div>
<div class="green box">box2</div>
<div class="red box">box3</div>
</body>
1.3 id选择器
HTML元素以id属性设置id,CSS中id选择器以#来定义
#id名{
属性1:属性值1;
...
}
id与类名的区别:
- 同一个id只能出现在一个标签里,不能两个标签都使用同一个id(id就像是身份证号,不可重复)
- 类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和JS搭配使用
1.4 通配符选择器
通配符选择器是给页面中的所有元素都设置。
通配符在特殊情况下会使用,比如:
清除所有元素标签的内外边距
*{
margin:0;
padding:0;
}
2. 复合选择器
2.1 后代选择器(重要)
后代包括儿子、孙子等所有后代
语法:元素1 元素2 {样式声明}
注:元素1和元素2可以是任意基础选择器
<style>
/* ul里的所有li标签*/
ul li {
color: red;
}
/*此处元素1是类选择器,元素2是标签选择器*/
.taihe li {
color: blue;
}
</style>
<body>
<ul>
<span>故宫建筑</span>
<li>午门
<ol>
<li>建成于明永乐十八年</li>
<li>清顺治四年重修</li>
<li>嘉庆六年又修</li>
</ol>
</li>
<li>角楼</li>
<li>太和门</li>
<li>太和殿</li>
</ul>
<ol class="taihe">
太和殿历史
<li>建成于明永乐十八年,称奉天殿</li>
<li>嘉靖四十一年改称黄极殿</li>
<li>清顺治二年改为太和殿</li>
</ol>
</body>
2.2 子选择器(重要)
选择元素1里所有的直接后代(元素2),
语法:元素1 > 元素2 {样式声明}
<style>
/*需求:给"大肘子"标红 */
/*只选.hot的直接a元素后代,不管孙子之类的a标签*/
.hot>a {
color: red;
}
</style>
<body>
<div class="hot">
<a href="#">大肘子</a>
<ul>
<li><a href="#">猪头</a></li>
<li><a href="#">猪尾巴</a></li>
</ul>
</div>
</body>
2.3 并集选择器(重要)
并集选择器可以选择多组标签,同时为他们定义相同的样式。
语法:元素1,元素2 {样式声明}
任何形式的选择器都可以作为并集选择器的一部分
<style>
div,
p,
.china li {
color: #a0375c;
}
</style>
<body>
<div>故宫藏品</div>
<p>陶瓷</p>
<span>陶瓷器占约三十五万件</span>
<ul class="china">
<li>磁山文化红陶盂</li>
<li>磁山文化红陶平底碗</li>
<li>青莲岗文化彩陶钵</li>
</ul>
</body>
2.4 伪类选择器
- 链接伪类选择器
- a:link 选择所有未被访问的链接
- a:visited 选择所有已被访问的链接
- a:hover 选择鼠标指针位于其上的链接
- a:active 选择活动链接(鼠标按下未弹起的链接)
为了确保生效,按照LVHA的顺序声明(这里其实不太明白,目前只写过下边这种代码,还没遇到过不生效的情况,后续如果有再补充吧)
a链接在浏览器中具有默认样式,所以实际工作中都需要给链接单独指定样式同样是因为CSS的三大特性(后续补充博客链接)<style> a{ color:gray; } a:hover{ color:red; /* 鼠标经过时,由原来的灰色变成红色*/ } </style>
- :focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素 。焦点就是光标,一般情况类表单元素才能获取,因此这个选择器也主要针对该表单元素。<style> input:focus { background-color: skyblue; } </style> <body> <input type="text"> <!-- CSS3 input的新特性,autofocus,获取焦点 --> <input type="password" autofocus> </body>
三、 元素显示模式
HTML元素可分为块元素、行内元素、行内块元素
1 行内元素
常见行内元素:<span>、<a>、<strong>、<em>、<i>
-
特点:
- 一行可以有多个元素
- 宽高设置不起作用
- 默认宽度为内容所占的宽度
- 行内元素可包含文字或其他行内元素
注意:链接a里不可以再包含链接a;a里可以放块级元素,但是转换为块级模型最安全
<style> span { /*这里宽高设置并不起作用*/ width: 150px; height: 50px; background-color: #437795; color: white; } </style> <body> <span>猩球崛起</span> <span>动作科幻片</span> <!-- 网页解析为两个标签 <a></a> <a></a> --> <a href="https://www.baidu.cn">百度<a href=""></a></a> </body>
2 块级元素
h1~h6,div, p, ul ol li 标签都是块级元素
-
特点
- 一个块级元素独占一行
- 宽高、内外边距都可以设置
- 块级元素看作是一个容器,可以包含任何其他元素
- 默认宽度为父级元素的宽度
注意:文字类的块级标签不能嵌套任何块级元素,比如p、 h1-h6 不能嵌套div或自身等其他块级元素。
<style> div { /* width: 200px; */ height: 100px; background-color: bisque; } </style> <body> <!--默认宽度为body的宽度 --> <div>猩球崛起由鲁伯特执导</div> </body>
3 行内块元素
比如:input img td标签;
- 特点:
- 一行可以有多个元素,但是元素与元素之间排列时会有空白缝隙
- 宽高、内外边距可以设置
- 默认宽度为文本内容所占的宽度
<style> input { width: 200px; height: 50px; border-color: purple; } </style> <body> <input type="text"> <input type="text"> </body>
4 模式转换
- 转为块级元素: display: bolck(常用)
- 转为行内元素:display: inline
- 转为行内块元素:display: inline-block(常用)
四. CSS背景
1 背景颜色
-
背景颜色值
background-color:颜色值 background-color: transparent 背景透明(默认值)
-
背景图像颜色透明度设置
background-color:rgba(0,0,0,0.3)
rgb是颜色。a是alpha透明度,取值范围再0-1。有时候0.3也简写为.3
2. 背景图片
background-image:none|url(图片路径值)
none:无背景图(默认的)
url:使用绝对或相对地址指定背景图像
url里的路径不要加引号
3 背景平铺
background-repeat: repeat | no-repeat|repeat-x|repeat-y
参数值 | 作用 |
---|---|
repeat | 背景图像在纵向和横向上平铺(默认的) |
no-repeat | 背景图像不平铺 |
repeat-x | 背景图像在横向上平铺 |
repeat-y | 背景图像在纵向上平铺 |
<style>
div{
width: 300px;
height: 100px;
background-color: skyblue;
/* url的路径注意不要加引号 */
background-image: url(img/logo.png);
}
.repeat-no {
/* 不平铺 */
background-repeat: no-repeat;
}
.repeat-x {
/* 横向平铺 */
background-repeat: repeat-x;
}
.repeat-y {
/* 纵向平铺 */
background-repeat: repeat-y;
}
</style>
<body>
<!-- 背景图片 -->
<div class="img"></div><br>
<!-- 背景图片平铺 -->
<!-- 默认在横向和纵向上平铺 -->
<!-- no-repeat ,在横向和纵向上都不平铺 -->
<div class="repeat-no"></div><br>
<div class="repeat-x"></div><br>
<div class="repeat-y"></div>
</body>
4 背景图片位置
background-position:参数x,参数y
- 参数是方位名词:top center bottom left right
- 如果指定的两个值都是方位名词,则两个值前后顺序无关
- 如果只指定了一个方位名词,另一个省略,则第二个默认居中对齐
<style>
.position{
background-position:top;
/*等价于*/
background-position:top center;
/*等价于*/
background-position:center top;
/*但是以上三个不等价于*/
background-position:center;
}
</style>
- 参数是精确单位
- 若参数值是精确坐标,第一个肯定是x坐标,第二个肯定是y坐标
- 若只指定一个数值,那么该数值一定是x坐标,另一个默认垂直居中
- 参数是混合单位
-
精确单位和方位名词混合使用,第一个值是x坐标,第二个值的y坐标
<style> .coordinate { width: 300px; height: 300px; background-color: skyblue; background-image: url(img/logo.png); background-repeat: no-repeat; /* 坐标 */ /* 第一个值肯定是x,第二个值是y */ background-position: 20px 20px; /* 第一个是x,另一个默认垂直居中 */ background-position: 10px; /* 等价于 (精确单位与方位名词混合使用)*/ background-position: 10px center; /* 混合使用时,第一个位置是x坐标,第二个值是y坐标 */ background-position: center 10px; } </style> <body> <div class="coordinate"></div> </body>
-
由于样式覆盖,最后的执行的是 background-position: center 10px;所以图标位于水平居中,距离top10px的位置。
5 背景图像固定
background-attachment: scroll | fixed
scroll:背景图像随对象内容滚动
fixed:背景图像固定
6 复合写法
以上属性可合并写在一个属性中,没有特定的书写顺序,一般习惯约定顺序为:
background:transparent url repeat-y fixed top