CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
本章内容:

1.选择器
2.transition过渡属性
3.outline轮廓属性
4.overflow滚动条
5.background背景样式

1.选择器

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开

常见的选择器:

  • 标签选择器:HTML元素以标签名来表示,以 标签名 来定义
  • id选择器:HTML元素以id属性用来设置id选择器,以 “#id名” 来定义
  • class选择器:在HTML中以class属性表示, 在 CSS 中,类选择器以一个点 “.class名” 号显示
  • 交集选择器:顾名思义,取交集,选择器之间不能有空格,要紧挨在一起
  • 并集选择器:顾名思义,取并集,选择器用逗号分隔开来
  • 属性选择器:[属性名=属性值]选取含有指定属性的元素
  • 一些特殊的选择器 CSS伪类选择器(用来添加一些选择器的特殊效果)
  1. 伪类选择器:

a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

1
2
3
4
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
  1. 属性选择器
1
2
3
4
5
6
7
8
9
10
11
作用:根据元素中的属性或属性值来选取指定元素

语法:[属性名]选取含有指定属性的元素

​ [属性名=“属性值”]选取含指定属性值的元素

​ [属性名^="属性值"] 选取属性值以指定内容开头的元素

​ [属性名$="属性值"] 选取属性值以指定内容结尾的元素

​ [属性名*="属性值"] 选取属性值包含指定内容的元素

CSS属性选择器

  1. 表单选择器

input[type=text] - 选取文本输入框
input[type=password] - 选择密码的输入框
input[type=number] - 选择数字的输入框

举例说明:搜索输入框带动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type=text]{
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
box-shadow: 5px 5px 3px #888888;
background-color: white;
background-image: url('https://static.runoob.com/images/mix/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
</style>
</head>
<body>
<p>搜索输入框带动画:</p>
<form>
<input type="text" name="search" placeholder="搜索.." id="search">
</form>
<script>
window.onload = function(){
let a =document.getElementById("search");
a.onfocus = function () {
a.style.width = "100%"
};
a.onblur = function () {
a.style.width = "40%"
};
}
</script>
</body>
</html>

2.transition过渡属性

语法: transition: property duration timing-function delay;

  • property 给指定CSS属性的name添加动画过渡效果(eg:width,height)
  • duration transition效果需要指定多少秒或毫秒才能完成
  • delay 定义transition效果开始的时候
  • timing-function 指定transition效果的转速曲线
    • ease:由快到慢到更慢
    • linear:恒速
    • ease-in:越来越快
    • ease-out:越来越慢
    • ease-in-out:先加速后减速

过渡属性举例说明:将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px

div{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s ease-in-out;
    -webkit-transition:width 2s ease-in-out; /* Safari */}

div:hover{
    width:300px;
}

3.outline轮廓属性

outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

  • outline-color 规定边框的颜色
  • outline-style 规定边框的样式
  • outline-width 规定边框的宽度

outline轮廓属性解决input设置圆角边框的相关问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <style>

.box{
text-align: center;
}
input {
border-radius: 14px; /* 圆角边框 */
width: 20em;
height:3em;
outline: none;
margin: 0;
padding: 10px 0;
border: 1px solid rgb(180, 180, 180);
font-size: 16px;
text-align: center;
box-shadow: 10px 10px 3px rgba(158,125,35,0.3);
}
input:hover {
border: 1px solid rgb(255, 0, 0);
}
</style>
</head>
<body>
<div class="box">
<input type="text" name="search" id="search" placeholder="搜索">
</div>
</body>

4.overflow滚动条

css样式的overflow-x:对边框中的溢出的内容进行隐藏

1
2
3
div{
overflow-x:hidden;
}
  • visible 默认值。超出部分呈现在元素框外面
  • hidden 裁剪超出部分
  • scroll 一直显示滚动条,超出部分滚动可见
  • auto 当超出元素框后,显示滚动条,超出部分滚动可见
  • inherit 从父元素继承overflow属性
    做一个简单的小demo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background-image: url("../public/images/5927f2c7269aa.jpg");
background-attachment: fixed;
background-size: 100%;
}
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}

div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}

div.ex3 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}

div.ex4 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>

<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>

<h2>overflow: scroll:</h2>
<div class="ex1">永州之野产异蛇:黑质而白章,触草木尽死;以啮人,无御之者。然得而腊之以为饵,可以已大风、挛踠、瘘疠,去死肌,杀三虫。其始太医以王命聚之,岁赋其二。募有能捕之者,当其租入。永之人争奔走焉。</div>

<h2>overflow: hidden:</h2>
<div class="ex2">永州之野产异蛇:黑质而白章,触草木尽死;以啮人,无御之者。然得而腊之以为饵,可以已大风、挛踠、瘘疠,去死肌,杀三虫。其始太医以王命聚之,岁赋其二。募有能捕之者,当其租入。永之人争奔走焉。</div>

<h2>overflow: auto:</h2>
<div class="ex3">永州之野产异蛇:黑质而白章,触草木尽死;以啮人,无御之者。然得而腊之以为饵,可以已大风、挛踠、瘘疠,去死肌,杀三虫。其始太医以王命聚之,岁赋其二。募有能捕之者,当其租入。永之人争奔走焉。</div>

<h2>overflow: visible (默认):</h2>
<div class="ex4">永州之野产异蛇:黑质而白章,触草木尽死;以啮人,无御之者。然得而腊之以为饵,可以已大风、挛踠、瘘疠,去死肌,杀三虫。其始太医以王命聚之,岁赋其二。募有能捕之者,当其租入。永之人争奔走焉。</div>

</body>
</html>

Demo展示:这里实现了背景图片的应用,以及css的overflow属性


-webkit-text-size-adjust:none :禁用Webkit内核浏览器的文字大小调整功能

1
2
3
4
5
故-webkit-text-size-adjust的用法如下:
1、当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;}
2、-webkit-text-size-adjust放在body上会导致页面缩放失效
3、body会继承定义在html的样式
4、用-webkit-text-size-adjust不要定义成可继承的或全局的

浏览器内核前缀:
Chrome(谷歌浏览器) :WebKit内核 -webkit-
Safari(苹果浏览器) :WebKit内核 -webkit-
Firefox(火狐浏览器) :Gecko内核 -moz-
IE(IE浏览器) : Trident内核 -ms-
Opera(欧朋浏览器) :Presto内核 -o-

CSS中, padding: 0px 0px 0px 0px; 四个0px分别代表什么?

padding: 0px 0px 0px 0px; 按顺序分别表示上填充、右填充、下填充、左填充为0px。
对应着:
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;


5.background背景样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
background-color:背景颜色
background-image:背景图片
-- body{
background-image:url('相对路径URL');
}

background-repeat:背景样式是否重复
--background-repeat:repeat-x;水平方向重复
--background-repeat:repeat-y;垂直方向重复

background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动
--:scroll 默认值,背景随着滚动而滚动
--:fixed 固定图像,不随页面滚动而滚动

background-position:right top left bottom (可多个组合)
background-size: 规定背景图像的尺寸(100%表示全局展示图片)

拓:背景图片自适应窗口大小案例

1
2
3
4
5
6
7
8
9
10
11
12
<!--背景图片自适应窗口大小-->
<head>
<style>
body{
background-image: url(./public/images/5bbd6378a1fdc.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
position: relative; // 可以选择不写
}
</style>
</head>

参考文献


 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议