css基础篇(第二篇)
回顾
上一篇css中基本山的认识了css是用来干什么的,以及大概的类型和基本的样式和数写规范之类的东西、重要的还是对于基础前端人员一个必备的技能:Chrome调试工具,这个是非常重要的,如果不了解或者不太熟悉css基础的话,建议去看一看css第一篇的东西,这一篇接着css开始讲。
常见的css选择器
在css中,除了类选择器和id选择器之外,常见的还有后代选择器和子元素选择器、交集选择并集选择器等。
后代选择器
后代选择器一般是指在div中包裹了a标签这类的选择器。
// 后代选择器
.con a {
color: red;
}
子类选择器
子类选择器一般是指例如有两层,就需要用到“ > ”,符号
<div>
<strong></strong>
</div>
// 子类选择器,一般只选择一层
div > strong {
}
// 多层选择器 可以影响到多层
div strong {
}
交集选择器
交集选择器指的是 既是标签而且又有class或id的名
<p class="red">红色</p>
// 交集选择器
p.red {
color: red
}
并集选择器
并集选择器是重点,因为在以后会常用到,并集选择表示的是 在p 和 class=“red” 中都会影响到
p,
.red{
color: red
}
注意:需要注意的是,在未来写css中永远要记住,结构一定比样式更重要,如果结构写的不好,没有根据页面的需求去写的话,样式写的再好都没用,所以再拿到设计稿的时候需要在心中有一个清晰的结构图然后再写样式会更好
链接伪类选择器
链接伪类选择器也是十分重要的,有以下这几种,重点记住:hover
- a:link————未访问的链接
- a:visited————已访问的链接
- a:hover————鼠标移动到链接上
- a:active————选定的链接 可以尝试将以下代码粘贴到编辑器中运行之后 鼠标移动到a标签中会发生什么!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<a href="http://www.baidu.com" class="wrapper-a">百度搜索不到</a>
</div>
</body>
</html>
<style>
.wrapper {
color: red;
}
// 利用 hover 让a标签变色
.wrapper-a:hover {
color: pink;
}
</style>
复合选择器总结
- 后代选择器:用来选择元素后代————空格隔开
- 子代选择器:选择最近的一级元素————“ > ”隔开
- 交集选择器:选择两个标签交集的部分————“ p.one ”
- 并集选择器:选择某些相同样式的选择器————“ , ”号隔开
- 链接伪类选择器:给链接更改状态————a:hover
块级元素和行内元素
块级元素:类似 div 一样,一个独占一行
- 常见的块级元素:h1~h6、p、div、ul、ol、li
- 特点:
- 独占一行
- 高度、宽度、外边距以及内边距都是可以控制的
- 宽度默认是容器(父级宽度)的100%
- 是一个容器盒子,里面可以放行内元素或者块级元素 注意:p、h1~h6、dt里面不要放div
行内元素:类似 span ,一行可以放很多
- 常见的行内元素(内联元素):a、strong、b、em、i、del、s、ins、u、span
- 特点
- 一行可以放多个行内元素
- 高、宽直接设置时无效的
- 默认宽度就是它本身内容宽度
- 行内元素只能容纳文本或其他行内元素 注意:链接里面不能再放链接
行内快元素:类似 img,一行可以放多个
- 常见的行内快元素:img、input、td
- 特点
- 和相邻(行内快)元素在一行上,但是之间会有空白缝隙,一行可以显示多个
- 默认高度就是本身内容的高度
- 高度、行高、外边距和内边距都是可控的
三种类型元素总结
- 块级元素:一行只能放一个块级元素
- 行内元素:一行可以放多个行内元素
- 行内快元素:一行可以放多个行内快元素
标签显示模式转换
- 标签显示模式转换:display
- 块级转行内:display:inline;
- 行内转块级:display:block;
- 块、行内元素转换为行内快:display:inline-block
css背景(background)
css中 background 常用的几种类型
-
background-color:背景颜色
-
background-image:url(图片位置)
-
background-repeat:背景平埔
- 默认就是 repeat(平埔)
- 背景不平埔:no-repeat
- 背景横向平埔:repeat-x
- 背景纵向平埔:repeat-y
-
background-attachment:acroll | fixed
- scroll:背景图像时随着图像内容滚动
- fixed:背景图像固定
-
background-position:背景位置(重点)
- position:top | center | bottom | left | right
- background-position:x坐标 && y 坐标 注意:在背景位置中,整个坐标:从左上角(x),(y)到右下角
-
background-position:50px(坐标),10px(y坐标);————精确位置 - 背景简写:
-
background:背景颜色 背景图片地址 背景平埔 背景滚动 背景位置
-
例子:background:#ccc url(images/s.jpg) no-repeat fixed top center
设置平埔+滚动如图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
</div>
</body>
</html>
<style>
.wrapper {
width: 1900px; height: 1080px;
border: 1px solid pink;
/* 设置 横轴:center 纵轴:top */
/* background: url(./sImg.jpg) no-repeat fixed center top; */
/* 设置横轴:100px 纵轴:200px */
/* background: url(./sImg.jpg) no-repeat fixed 100px 200px; */
/* 设置平埔 */
/* background: url(./sImg.jpg) fixed center top; */
/* 设置滚动 */
/* background: url(./sImg.jpg) center top; */
}
</style>
设置x=100px,y=200px 如图
其余的大家可以自行试试
a链接取消下划线
- text-decoration:none;————取消a链接下划线 一般a链接都会有一个下划线,通常情况下都会选择取消这个下划线对用户体验更友好
背景透明
- background:rgba(0,0,0,0.3)————表示颜色的透明度
背景总结
- background-color:背景颜色
- background-image:url():背景图片
- background-repeat:背景平埔(repeat/no-repeat/repeat-x/repeat-y)
- background-position:背景位置(center center)
- background-attachment:背景固定还是滚动(scroll/fixed)
- 背景简写:background:背景颜色 背景图片地址 背景平埔 背景滚动 背景位置
css 优先级问题
css全权重的计算也非常重要,会影响到布局,下面的图片是css中权重的计算。可以尝试在编辑器中试一试
好了,css 的第二讲就讲完了,这篇内容还是非常多而且非常重要的,小伙伴们可以好好的温习温习。有什么不懂得欢迎留言区讨论