2020培训0706-0708【web入门】笔记「三」CSS专题整理
CSS(cascade style sheet)层叠样式表
【我觉得类似于C里面引用函数】
一、基础知识
语法:样式名:值;
样式分类
- 行内样式:在标签上写style属性(优先级最高)
- 内嵌样式:在head标签里写style标签,只对当前网页生效
即:<style>写选择器</style>
- 外部样式:在head标签里写link标签
例:<link rel="stylesheet" href="style.css">
此处引用了style.css文件地址
关于优先级:在值后面加 ! important 后优先级最高
二、选择器(selector)
语法:
选择器名称
{
样式:值;
}
分类
- 基本选择器——标签选择器
- 基本选择器——id选择器(符号使用#)
- 基本选择器——class选择器(符号使用.)
用法举例:
浏览器运行:
- 复杂选择器——分组选择器(使用逗号分隔多个选择器)
- 复杂选择器——交集选择器(标签选择加上class或id选择器,注意中间没空格)
- 后代选择器(使用空格)加选择符号 > ,只对子代使用而不对其他后代使用
(权重比基本选择器高) - 属性选择器(语法为 [ 属性名 ] )
- 全局重置( * )
三、上中下基本布局
四、特性总结
继承性
CSS部分的属性具有继承性,意思是影响后代
例如:font-size、font-weight等
动画性
举例font-weight的动画性
文本样式
1、值单位
- 像素(px):默认的网页字体大小是16px,一般都会设置14px
- 相对单位(em):以当前父元素为基础的倍数,可以写小数
root单位(rem):以body为基础
2、颜色单位
颜色定义:在HTML页面中,颜色统一RGB的模式显示,也就是通常人们所说的“红绿蓝”三原色模式。每种颜色都由这3种颜色的不同比重组成。当红绿蓝3个分量都设置为255时就是白色,例如rgb(100%,100%,100%)
和#FFFFFF
几种表达方法:
- 渐变色:
<body style="background: linear-gradient ( orange, red );">
3、字体样式
- 长度单位
(1)相对类型:所谓相对,就是要有一个参与基础,相对于该参考基础而设置的尺度单位
px(piexl)像素
em:这是设置以目前字符的高度为单位
(2)绝对类型:所谓绝对,就是无论显示设置的分辨率是多少,都代表相同的长度
- font-family(字体):用逗号分隔多个字体表示先找第一个字体,如果客户端电脑没有就使用第二个,以此类推,否则使用默认字体
- font-style(文字倾斜度): normal | oblique | italic |
- font-weight(字体加粗): normal | bold | bolder | lighter | 100~900(数字越大越粗)
- text-transform(英文字母大小写转换): lowercase | uppercase | capitalize(首字母大写)
- font-size(字体大小):略
- text-decoration(文字的装饰效果):复合属性,color、style、line,值为 none | underline等
- text-indent(首行缩进):(中文一般是2em)
- 设置字词间距
letter-spacing(中文间距)
word-spacing - line-hight(设置段落内部的文字行高):
技巧:文本垂直居中,设置文本高度等于行高即可实现文本垂直居中
- padding(内边距)
- margin(设置段落外边距)
- text-align(文本水平位置):left | center | right | justify
- verticl-align(垂直对齐方式):只有td能用
4、图片设置
新建img文件夹 拖拽图片至文件夹完成创建任务
输入代码,在src中输入图片地址,完成图片导入
- border(设置图片边框):
边框可以装饰图片,border是复合属性是由,边框宽度(border-width),边框线风格(border-style),边框颜色(border-color)构成
为不同的边框分别设置样式:【border-left ,
border-right , border-top , border-bottom】例如border-right-color
有4个方向可以单独设置,也可以一次设置。如果提供四个参数值,将按照上右下左的顺序作用于四边;如果提供三个,第一个用于上,第二个用于左右,第三个用于下;如果提供两个,第一个用于上下,第二个用于左右;如果只提供一个,用于全部的四边。 - 图片宽度设置:
百分比是相对大小,是相对于外容器(标签)的宽度,当窗口resize,图片也会变,注意仅设置了图片的宽度,就会按比例缩放,同理,仅设置height的相对高度也会按比例缩放。两者同时设置当然是无比例缩放。 - 图文混排
文字环绕:需要借助浮动的特性,因为被浮动的元素脱离标准流,下面的标签就上去了 - 设置图片与文字的对齐方式:
横向对齐方式:text-align
纵向对齐方式:<p><img src=”” alt=””>文字<p>
默认情况下,行内的图像的最下端将与同行的文字的基线对齐,改变这种方式需要用vertical-align:text-top | text bottom | middle
浏览器运行:
五、盒子模型
一个盒子实际所占有的宽度(或高度)是由“内容+内边距+边框+外边距”组成,css中可以通过设定width和height的值来控制内容所占的矩形的大小,并且对于任何一个盒子,都可以分别设定4条边各自的属性。
关键词:
内容:content(标签里面放的东西)
内边距:padding(内容和边框之间的距离)
边框:border(可有可无)
外边距:margin(盒子与周围的距离)
盒子宽度=左外边距+左边框+左内边距+内容+右内边距+右边框+右外边距
盒子高度=上外边距+上边框+上内边距+内容+下内边距+下边框+下外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box</title>
<style>
#box
{
border-top: 2px solid #000;
border-right: 20px dotted #000;
border-bottom: 5px solid #0f0;
border-left: 6px solid #0ff;
margin: 30px 20px 20px 50px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="box">
<span>盒子</span>
</div>
</body>
</html>
六、背景图片(background-image)
值是url( ' 路径 ' )
注意文件路径,上一级文件夹可以不写,同级文件夹必须写清楚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img</title>
<style>
#logo
{
background-image: url('css/img/sina.png');
width: 136px;
height: 39px;
vertical-align: middle;
display: inline-block;
}
#header
{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header-logo" id="header">
<span id="logo"></span>
</div>
</div>
</body>
</html>
- 与背景图片样式配合使用的有以下样式:background-repeat:repeat | no-repeat | repeat-x | repeat-y
浏览器运行:
-
background-position:水平 垂直
水平:left | center | right | 30% | 20px
垂直:top | center | bottom | 50% | 20px
另外,transition:all 3s;可以设置图片滚动
七、浮动
让块级元素并列显示、图片环绕或名片效果
float: right | left | none
特点
- 被浮动的元素宽度不再是100% 而是根据内容改变
- 被浮动的元素脱离标准显示流,意思是不在原来的位置了,所以下面的元素往上移动一个标准流
- 一行有两个被浮动元素时,若外容器宽度不足以放下两个元素,第二个浮动的元素就会被挤到下面
为什么要清浮动?
- 为了让父元素能够包裹浮动的子元素,如果父元素只包含浮动元素,那么它的高度就会塌缩为零
- 使浮动元素到下一行
如何清浮动?
- 给盒子加高
- clear:both(放到所有浮动元素的下面,否则只有clear上面的浮动元素被包含)
- overflow:hidden
- 伪类
:before
// 在指定标签的前面加元素
————————————————————————————————
【新手笔记 欢迎指正】
本文地址:https://blog.csdn.net/RK_Dangerous/article/details/107296754