<h2>Shopping (unordered) list</h2>
<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>
<ul>
<li>Humous</li>
<li>Pitta</li>
<li>Green salad</li>
<li>Halloumi</li>
</ul>
<h2>Recipe (ordered) list</h2>
<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>
<ol>
<li>Toast pitta, leave to cool, then slice down the edge.</li>
<li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
<li>Wash and chop the salad.</li>
<li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>
<h2>Ingredient description list</h2>
<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>
<dl>
<dt>Humous</dt>
<dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
<dt>Pitta</dt>
<dd>A soft, slightly leavened flatbread.</dd>
<dt>Halloumi</dt>
<dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
<dt>Green salad</dt>
<dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>
CSS(上)
什么是CSS
Cascading Style Sheets 简称 层叠样式表
官方描述:
用于描述用标记语言编写的文档的外观和格式。 虽然最常用于更改用HTML和XHTML编写的网页和用户界面的样式,但该语言可以应用于任何类型的XML文档,包括纯XML,SVG和XUL。 与HTML和JavaScript一起,CSS是大多数网站使用的基础技术,用于创建具有视觉吸引力的网页,Web应用程序的用户界面以及许多移动应用程序的用户界面。
人话:
层叠样式表也就是CSS,是你在HTML之后应该学习的第二门技术。
HTML用于定义内容的结构和语义,CSS用于设计风格和布局。比如,您可以使用CSS来更改内容的字体、颜色、大小、间距,将内容分为多列,或者添加动画及其他的装饰效果,进而对页面的版面布局和外观样式的美化。
用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
例:
基础
1、HTML的局限性
如果直接利用html页面书写页面,页面的美观达不到要求,如果要添加一些简单样式利用html属性添加会是代码复杂臃肿,所以我们要使用css进行页面的美化;
2、CSS作用以及初识
Css的作用:
主要是用来进行页面的版面布局和外观样式的美化;
使用css的原理:
能够将结构html和样式css分离书写,简化代码,提高可阅读性;
3、css引入方式
01 行内样式:
直接在标签的开始标签身上添加一个 style=“”属性,然后在引号里面书写css属性和属性值即可,没有实现结构和样式分离,尽量不用
02 内部样式:
书写在head标签里面,title标签下面,以一对style标签包裹,实现了结构和样式的半分离;
03 css外部链接:
外部链接的步骤:
使用外部链接的好处:
4、CSS 书写格式
选择器 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3;…… }
选择器:指定CSS样式作用的HTML对象(要更改样式的标签),花括号内是对该对象设置的具体样式。
属性和属性值:以键值对的形式出现,属性和属性值之间用英文的冒号 ’ : ’ 链接;
5、CSS选择器
选择器的作用:把想要选择的元素标签选择出来。
选择器的分类:基础选择器和复合选择器
基础选择器
a. 标签选择器
以标签名称命名的选择器,可以把将页面中所有的同类元素全部选中;
注意:如果我们选中了改标签,页面中所有的该标签就会被全部选中,所有不建议大家直接使用标签选择器;
b. 类选择器
使用方式:在css里面用点“ . ” + 类名称 +{ css键值对 } 进行样式定义;
![image.png](https://cdn.nlark.com/yuque/0/2019/png/162989/1562858318381-5de43d24-597e-438f-82ed-948258ef45f0.png#align=left&display=inline&height=22&name=image.png&originHeight=48&originWidth=692&size=20509&status=done&style=none&width=314.54544772786556)
调用:在html里面哪个标签需要,就在开始标签敲空格class=“类名称”进行调用;
命名规则:不能用纯数字、不能数字开头的、不能中文命名,建议不要用特殊符号;可以用英文单词或者拼音 命名,可以以数字结束
多类名调用:一个标签身上只能使用一个class,如果想要调用多个类名我们可以在一个class里面直接以空格 隔开直接书写另一个类名称即可;
c. id 选择器
类选择可以重复使用,只要样式一致就可以重复的使用同一个类名称;
id选择器是唯一的不能重复使用,一个id名称一个页面只能出现一次;
d. 通配符选择器 *
一个*表示选中所有标签***,匹配页面的所有标签,降低页面得到响应时间,不建议使用;
实际工作中用的最多的是下面的代码
{ margin: 0; padding: 0; }****
e. 属性选择器
f. 子元素和后代元素选择器
https://codepen.io/AlexZ33/pen/YzzRPBW
这里着重实践下
![](https://cdn.nlark.com/yuque/0/2019/gif/247789/1575010312607-f2eaff4a-f144-4277-988e-2412d08f75d5.gif#align=left&display=inline&height=739&originHeight=739&originWidth=596&size=0&status=done&style=none&width=596)
相邻兄弟选择器
常用场景https://codepen.io/AlexZ33/pen/qBBeeBz
g. 伪类选择器
说明:
https://codepen.io/AlexZ33/pen/abbQONO
H. 伪元素选择器
简单用法:
https://codepen.io/AlexZ33/pen/WNNYvoa?&editable=true
复杂实践:
https://codepen.io/AlexZ33/pen/XWWybaJ
常用的HTML和CSS content属性特殊字符归纳
使用before伪元素实现面包屑
i. 子元素伪类选择器
https://codepen.io/AlexZ33/pen/dyyQaPG
j.
6、CSS选择器权重
权重主要分为 4 个等级:
style=""
,权值为1000#content
,权值为100.content
,权值为10div p
,权值为1例子:
最终页面效果如下:
https://codepen.io/AlexZ33/pen/QWWVYpR
类似示例:
无法改变颜色的标签
7、CSS优先级
遵循如下法则:
!important
规则的优先级最大例子:
https://codepen.io/AlexZ33/pen/dyyqaVZ
8、数值与单位
9、背景和边框
背景知识
border
border-radius --> [border-radius(圆角)]()[-Css3演示]() --> https://codepen.io/AlexZ33/pen/YzzRwLy
box-shadow --> Box Shadow(阴影)-Css3演示 -->
border-image
background :
注意:Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。Firefox、Chrome 以及 Safari 支持所有新的边框属性。 对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-。 Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-
1、半透明边框
假设我们想给一个容器设置一层白色背景和一道半透明的边框,我们最初的尝试可能是这样的:
除非你对背景和边框的工作原理非常地熟悉,否则展示出来的结果可能让你摸不着头脑,因为我们的背景会从它的半透明边框透上来。如下图所示:
解决方案
默认情况下,背景会延伸到边框所在的区域下层,即使你使用的是不透明的实色边框。幸运的是,在CSS3中,我们可以通过
bakcground-clip
属性来调整上述默认行为。这个属性的初始值是border-box,如果不希望背景侵入到边框所在的范围,我们可以把它的值设为padding-box
,即:https://codepen.io/AlexZ33/pen/rNBPGOj
2、多重边框
目前为止,我们大多数人可能用过(或滥用过)box-shadow来生成投影。不太为人所知的是,它还接受第四个参数(叫做扩张半径),通过指定正值和负值,可以让投影面积加大或减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值,得到的投影其实就像一道实线边框:
使用box-shadow的另一个好处是它支持逗号分隔语法,我们可以创建任意数量的投影(边框)
需要注意的是,box-shadow是层层叠加的,第一层投影位于最顶层。因此,需要按照此规律调整扩张半径
https://codepen.io/AlexZ33/pen/LYYXpvX
高级案例:
https://alexz33.github.io/CSS3_demo/css3_picshadow.html
3、border实现三角形
https://codepen.io/AlexZ33/pen/MWWzMdm
4、圆角/阴影/过渡
9、文字文本样式
我们将详细介绍文本/字体样式的所有基本原理,包括设置文字的粗细,字体和样式,文字的属性简写,文字的对齐,和其他效果,以及行和字母间距。
用于样式文本的 CSS 属性通常可以分为两类,我们将在本文中分别观察。
可细致学习文章:
CSS中的文字样式涉及什么?
01 文字大小font-size
font-size文字大小,常用的单位是px像素,一般是有默认的字体大小16px,但是我们建议大家一开始就在body中设置一个默认大小;
02 文字字体设置font-family
font-family:Arial,”Microsoft Yahei”,“微软雅黑”;
unicode字体
在CSS中设置字体名称,可以直接写中文,但是在文件编码(GB2312, UTF-8等)不匹配时会产生乱码的错误.XP系统不支持类似微软雅黑的中文
![image.png](https://cdn.nlark.com/yuque/0/2019/png/162989/1562858905422-32673d72-5c9d-4060-bfdd-b4c57a18e2ae.png#align=left&display=inline&height=176&name=image.png&originHeight=388&originWidth=734&size=100218&status=done&style=none&width=333.63635640499035)
方案一:可以用英文来代替
方案二:在CSS直接使用unicode编码来写字体名称可以避免这个错误,使用unicode写中文字体名称,浏览器可以正确的解析
03 文字的粗细设置font-weight
加粗:font-weight:bold; font-weight:700;
不加粗:font-weight:normal; font-weight:400;
04 文字的倾斜样式控制font-style
倾斜:font-style:italic;
不倾斜:font-style:normal;
注意:实际工作中我们一般会使用font-style:normal;让em和i不倾斜;
05 字体的颜色控制 color
a、直接写英文单词yellow red等等
b、16进制表示#aabbcc或者#abc
c、rgb()如rgb(0,0,0)
d、rgba(),如rgba(0,0,0,0.5)a为透明度
黑色系列:#000; #333; #666; #9999;
灰色系列:#ccc; #eee; #ddd; #dedede;
红色:#f00;
06 文字居中设置text-align
text-align有三个取值left、center、right, text-align只控制盒子里面的内容的对齐;
文本居中:text-align:center;
https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align
07 文本的行高设置line-height
line-height取值为数字,可以设置文字行与行之间的距离;
line-height:30px; 表示行高30px
08 文本的首行缩进 text-indent**** ****
text-indent首行缩进,取值为具体的像素值或者直接em,1em等于一个字的大小;
09 文本装饰线条修饰text-decoration
text-decoration:none; 没有线
text-decoration:underline;下划线
text-decoration:line-through; 中划线/删除线
text-decoration:overline;上划线
注意:实际工作中我们用的最多的是没有线 text-decoration:none;,主要是给超链接a标签去除默认的下划线;一般放在css的最前面将页面所有a的样式都去除;
10 字体综合写法
font:是否倾斜 是否加粗 文字大小/ 行高 字体;
font: font-style font-weight font-size/line-height font-family;
注意:****
11 自定义字体@font-face
以前 CSS3 的版本,网页设计师不得不使用用户计算机上已经安装的字体。
使用 CSS3,网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。
您所选择的字体在新的 CSS3 版本有关于
@font-face
规则描述。您"自己的"的字体是在 CSS3
@font-face
规则中定义的。注意:Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体。
Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型)。
Chrome, Safari 和 Opera 也支持 SVG 字体/折叠。
Internet Explorer 同样支持 EOT (Embedded OpenType) 字体。
在
@font-face
规则中,您必须首先定义字体的名称(比如 FontAwesome ),然后指向该字体文件 fontawesome-webfont.woff 。源码参见 https://gitee.com/turingitclub/css-learning/tree/dev/base中
base
目录下的 font.html12、格式化列表
现在,如果你去到例子的展示页面,并使用浏览器开发者工具查看那些列表元素,你会注意到若干个默认的样式预设值:
<ul>
和<ol>
元素设置margin
的顶部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); (在这里注意的是浏览器默认字体大小为16px)。<li>
默认是没有设置间距的。 --> 怎样设置列表间距?<dl>
元素设置 margin的顶部和底部: 16px(1em) ,无内边距设定。<dd>
元素设置为:margin-left
40px
(2.5em
)。<p>
元素设置 margin的顶部和底部: 16px(1em),和其他的列表类型相同。a、处理列表间距
line-height
,因此段落和每个单独的列表项目将在行之间具有相同的间距。 这也将有助于保持垂直间距一致。margin-bottom
为1.5 rem(与段落(p)和列表项目(li))相同。 再次强调一遍,这里很好地实现了一致性! 我们还使描述术语具有粗体字体,因此它们在视觉上脱颖而出。a、 列表特点样式
13、CSS样式化链接
当为 links 添加样式时, 理解利用伪类有效地建立链接状态是很重要的,以及如何为链接添加样式来实现常用的功能,比如说导航栏、选项卡。我们将在本文中关注所有这些主题。
第一件需要理解的事情是链接状态的概念,链接存在时处于不同的状态,每一个状态都可以用对应的 伪类 来应用样式:
:link
伪类来应用样式。:visited
伪类来应用样式。:hover
伪类来应用样式。HTMLElement.focus()
) 它可以使用:focus
伪类来应用样式。:active
伪类来应用样式。a. 默认样式
https://codepen.io/AlexZ33/pen/jOOQXpa
当你观察默认样式的时候,你也许会注意到一些东西:
有趣的是,这些默认的样式与20世纪90年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的,如果链接的样式不同,就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式,只是你的样式不应该与用户预期的相差太大,你应该至少:
color
文字的颜色cursor
鼠标光标的样式,你不应该把这个关掉,除非你有非常好的理由。outline
文字的轮廓 (轮廓有点像边框,唯一的区别是边框占用了盒模型的空间,而轮廓没有; 它只是设置在背景图片的顶部)。outline 是一个有用的辅助功能,所以在把它关掉之前考虑清楚;你至少应该将悬停 (hover) 状态的样式同时应用到选中 (focus) 状态上。b 将样式应用到一些链接
https://codepen.io/AlexZ33/pen/jOOQJwE
14、文本自动换行
15、文本自动换行2
如果你碰到一个比自身容器长的文本,这个技巧对你很有用。在这个示例中,默认时,不管容器的宽度,文本都将水平填充。
16、 长单词与URL自动换行
17、使用服务端字体
18、修改字体种类而保持字体尺寸不变
19、文字效果
CSS3 文本效果是这样一个术语用来在正常的文本中实现一些额外的特性。
主要是两个属性的 CSS3 文本效果,如下:
注意:Internet Explorer 10, Firefox,Chrome, Safari, 和 Opera支持text-shadow 属性。所有的主流浏览器支持自动换行(word-wrap)属性。Internet Explorer 9及更早IE版本不支持 text-shadow 属性
text-shadow
文本阴影。 您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色:
word-wrap
换行。 CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字:
属性
源码
https://codepen.io/AlexZ33/pen/JjobjWB
12、盒子模型
所有的元素都被一个个的“盒子(box)”包围着
盒子类型
块级盒子(Block box) 和 内联盒子(Inline box)
在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流(page flow)和元素之间的关系方面表现出不同的行为:
一个被定义成块级的(block)盒子会表现出以下行为:
width
和height
属性可以发挥作用除非特殊指定,诸如标题(
<h1>
等)和段落(<p>
)默认情况下都是块级的盒子。如果一个盒子对外显示为
inline
,那么他的行为如下:width
和height
属性将不起作用。inline
状态的盒子推开。用做链接的
<a>
元素、<span>
、<em>
以及<strong>
都是默认处于inline
状态的。我们通过对盒子
display
属性的设置,比如inline
或者block
,来控制盒子的外部显示类型。常见block类型:
常见inline类型:
display
display
CSS 属性指定了元素的显示类型,它包含两类基础特征:block vs inline
示例1: https://codepen.io/AlexZ33/pen/WNNWLJV
示例2: 改变display属性 --> https://codepen.io/AlexZ33/pen/abbxPjw
示例3:
完整的 CSS 盒模型应用于块级盒子,内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容
inline-block
inline-block类型是CSS2.1中追加的一个盒模型。
line-block类型属于block类型盒的一种,但是在显示时它具有inline类型盒的特点:
https://codepen.io/AlexZ33/pen/yLLrWaM
inline-block类型执行并列显示
CSS2.1之前,如果要在一行并列显示多个block类型的元素,则需要使用float属性或者position属性,但是这样会使样式变得比较复杂。
CSS2.1追加了inline-block类型,使并列显示多个block类型变得非常简单。
使用float属性将div元素并列显示:
https://codepen.io/AlexZ33/pen/WNNWBdo
使用inline-block将div元素并列显示
**https://codepen.io/AlexZ33/pen/QWWPRBp
默认情况下使用inline-block类型时并列显示的元素的垂直对齐方式可以通过vertical-align属性更改
使用inline-block显示水平菜单
CSS2.1之前,对于水平菜单的实现需要使用到float属性。
一般会利用ul列表和li列表
使用float属性显示水平菜单
https://codepen.io/AlexZ33/pen/pooBmmp
使用inline-block显示水平菜单
**https://codepen.io/AlexZ33/pen/abbxgoX
另外,还可以让a元素也属于inline-block类型,然后使用背景色,并指定宽度, 使a元素占据整个菜单。
https://codepen.io/AlexZ33/pen/abbxgOM
怎么解决li之间的间隙
原因是:浏览器的默认行为是把inline元素间的空白字符(空格换行tab)渲染成一个空格,也就是我们上面的代码
方法一:既然是因为
方法二:
inline-table
CSS2中新增的另一种盒类型: inline-table类型
https://codepen.io/AlexZ33/pen/GRRLbdE
结果中表格前后的文字处于不同行中, 因为table元素属于block类型,所以不能和其他文字处于同一行,但如果将table元素修改成inline-block类型,就可以处于同一行了。
list-item类型
如果在display属性中将元素设定为list-item类型,可以将多个元素作为列表来显示,同时在元素的开头加上列表标记。
https://codepen.io/AlexZ33/pen/vYYMqQx
run-in类型 & compact类型
表格相关类型
none类型
注意它和
visibility: hidden;
的区别各个浏览器对各种类型支持情况
盒中容纳不下的内容显示
overflow属性
overflow
overflow-x & overflow-y
text-overflow
::-webkit-scrollbar
对盒使用阴影
box-shadow
指定针对元素的宽度与高度的计算方法
CSS中组成一个块级盒子需要:
Content box: 这个区域是用来显示内容,大小可以通过设置
width
和height
.Padding box: 包围在内容区域外部的空白区域; 大小通过
padding
相关属性设置。Border box: 边框盒包裹内容和内边距。大小通过
border
相关属性设置。Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过
margin
相关属性设置13、作业: 用css写一个网页
1、https://gitee.com/turingitclub/css-learning/tree/dev/task01 task1
2、 ie的盒子模型 和 chrome的盒子模型有什么不一样?
--> 参考文档 : https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
3、学习task2今天讲到的内容,照着代码
14、Emmet语法
VsCode中使用Emmet神器快速编写HTML代码
参考阅读
然后可以暂时跳过伪类选择器,开始重新仔细看文本相关的样式
当然,你也可以选择阅读其它网站,比如W3School等上面相应的内容。