python爬虫学习笔记-CSS(大致了解)
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
CSS中文译作“层叠样式表”或者是“级联样式表”是用于控制网页外观处理并允许将网页的表现与内容分离的一种标记性语言CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)是Web网页开发技术的重要组成部分。
那么接下来继续看下使用CSS有什么好处吧。
-
使用CSS样式可以有效地对页面进行布局更加灵活多样。
-
使用CSS样式可以对页面字体、颜色、背景和其他效果实现精确控制同时对它们的修改和控制变得更加快捷更加强大。
-
站点中所有的网页风格都使用一个CSS文件进行统一控制达到一改全改。还可以快速切换主题我们可以把HTML比作是骨架CSS是衣服。同一个HTML骨架结构不同CSS样式所得到的美化布局效果不同。
-
CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等。
-
CSS可以将网页的表现与结构分离使页面载入得更快,更利于维护这也是我们的最终目的。
CSS基本语法:
CSS的基本语法由选择器、属性、属性的值组成如果选择器有多个属性由分号隔开。
注意这里的代码都是英文格式例如花括号、冒号和分号。
CSS的引入方式
- 嵌入式
嵌入式是把CSS样式写在HTML文档内部head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文档需要特殊单独的样式时可以使用该模式。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>锚点的使用</title>
<meta charset="utf8">
<style>
div{
color: white;
background-color: #369;
text-align: center
}
</style>
</head>
<body>
<div> 嵌入式</div>
</body>
</html>
- 链接式
链接式就是把CSS样式写在HTML文档的外部一个后缀为 .css 的外部样式表中然后使用时在head标签中使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时外部样式表是最理想的选择。在使用外部样式表的情况下我们可以通过改变一个文件来改变这所有页面的外观。
common.css
div{
color: white;
background-color: #369;
text-align: center
}
html文件
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>锚点的使用</title>
<meta charset="utf8">
<link rel="stylesheet" href="common.css">
</head>
<body>
<div>链接式</div>
</body>
</html>
CSS的选择器
基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
color: red;
}
.c1{
color: red;
}
.c2{
font-size: 32px;
}
</style>
</head>
<body>
<div id="i1">item1</div>
<div id="i2">item2</div>
<div id="i3">item3</div>
<div class="c1 c2">item4</div>
<div class="c1">item5</div>
<div class="c1">item6</div>
</body>
</html>
CSS的属性操作
文本属性
- font-style字体样式风格
/*
属性值
normal设置字体样式为正体。默认值。
italic设置字体样式为斜体。这是选择字体库中的斜体字。
oblique设置字体样式为斜体。人为的使文字倾斜而不是去使用字体库的斜体字。
*/
- font-weight字体粗细
/*
属性值
normal设置字体为正常字体。相当于数字值400
bold设置字体为粗体。相当于数字值700。
bolder设置字体为比父级元素字体更粗的字体。
lighter设置字体为比父级元素字体更细的字体。
number用数字表示字体粗细。从小到大越来约粗取值范围100、200、300、400、500、600、700、800、900。
注意
font-weight的常用值有两个normal和bold其他的值在浏览器中的支持并不好。
*/
- font-size字体大小
/*
font-size的值有很多有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger也可以设置值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素 px 、字符 em默认1em等于16px2em等于32px根据不同浏览器的默认字体大小而决定 。
字体不指定大小时主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器字体最小只能设置成12像素新版已经修复。*/
- color字体颜色
// 可以使用color来表示字体的颜色颜色值最常用的有三种形式英文单词十六进制RGB十进制。
<style>
.c1{
color: red;
}
.c1{
color: #369;
}
.c1{
color: RGB(0,0,255);
}
</style>
- text-align文本对齐方式
/*
text-align属性可以设置文本内容的水平对齐方式。属性值常用的有
左对齐left、居中对齐center、右对齐right。justify 实现两端对齐文本效果。
*/
-
vertical-align
vertical-align 属性设置元素的垂直对齐方式。
背景属性
- background-color背景颜色
页面的背景颜色有四种属性值表示分别是transparent透明RGB十进制颜色表示十六进制颜色表示和颜色单词表示。
属性使用
/*
background-color: transparent; // 透明
background-color: rgb(255,0,0); // 红色背景
background-color: #ff0000; // 红色背景
background-color: red; // 红色背景
*/
- background-image背景图片
background-image可以引入一张图片作为元素的背景图像。默认情况下background-image放置在元素的左上角并在垂直和水平方向重复平铺。
语法
// background-image: url('图片地址')
当同时定义了背景颜色和背景图像时背景图像覆盖在背景颜色之上。 所以当背景图片没有被加载到或者不能完全铺满元素时就会显示背景颜色。
- background-repeat背景平铺方式
CSS中当使用图像作为背景了以后都是默认把整个页面平铺满的但是有时候在很多场合下面页面并不需要这种默认的效果而可能需要背景图像只显示一次或者只按照指定方式进行平铺的时候可以使用background-repeat来进行设置。
background-repeat专门用于设置背景图像的平铺方式一般有四个值默认是repeat平铺no-repeat不平铺repeat-xX轴平铺repeat-yY轴平铺。
- background背景样式缩写
多个不同背景样式属性也是可以同时缩写的背景样式的缩写属性的顺序是不固定的可以任意编排。
语法
// background: 背景颜色 背景图片 背景平铺方式 背景定位;
边框属性
- border-style边框风格
定义边框的风格值可以有
/*
none没有边框当border的值为none的时候系统将会忽略[border-color]
hidden隐藏边框低版本浏览器不支持。
dotted点状边框。
dashed虚线边框。
solid实线边框。
double双实线边框两条单线与其间隔的和等于border-width值。
*/
border-style的值可以缩写的
/*
只有一个值的时候表示同时控制上下左右的边框风格。
只有两个值的时候表示分别控制上下、左右的边框风格。
有三个值的时候表示分别控制上、左右、下的边框风格。
有四个只的时候表示分别控制上、右、下、左的边框风格。
*/
border-style还可以单独指定不同方向
/*
border-top-style 设置上边的边框风格
border-bottom-style 设置下边的边框风格
border-left-style 设置左边的边框风格
border-right-style 设置右边的边框风格
*/
- border-width边框宽度
使用border-width可以定义边框的厚度值可以是medium中等thin薄thick厚和指定数值的宽度。 同时border-width也可以进行缩写
/*
只有一个值的时候表示同时控制上下左右的边框宽度。
只有两个值的时候表示分别控制上下、左右的边框宽度。
有三个值的时候表示分别控制上、左右、下的边框宽度。
有四个只的时候表示分别控制上、右、下、左的边框宽度。
*/
border-width也可以单独指定不同方向
/*
border-top-width 设置上边的边框宽度
border-bottom-width 设置下边的边框宽度
border-left-width 设置左边的边框宽度
border-right-width 设置右边的边框宽度
*/
- border-color边框颜色
定义边框的颜色值表示的方式可以是十六进制RGB十进制和单词表示法。
同上border-color的缩写
/*
只有一个值的时候表示同时控制上下左右的边框颜色。
只有两个值的时候表示分别控制上下、左右的边框颜色。
有三个值的时候表示分别控制上、左右、下的边框颜色。
有四个只的时候表示分别控制上、右、下、左的边框颜色。
*/
border-color也可以单独指定不同方向
/*
border-top-color 设置上边的边框颜色
border-bottom-color 设置下边的边框颜色
border-left-color 设置左边的边框颜色
border-right-color 设置右边的边框颜色
*/
- 边框样式缩写
还可以把边框风格边框宽度边框颜色进行组合在一起进行缩写语法
// border: 边框宽度 边框样式 边框颜色;
注意border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样式。