CSS总结

学完除定位后的其他内容,后写出的作品。

模仿小米商城后的作品,没有做完(扣照片后麻烦就没继续做)

经典广告格式

1:大致内容+重点:

CSS包含选择器和属性,其中选择器和属性是组成CSS的大部分内容,同时选择器的选择(是让网页好看的第一步,选择器的选择很简单),属性是作用于网页内容变好看的直接原因。

CSS中的重点内容则是:浮动、盒子模型、定位。

2选择器:

选择器分为基础选择器和复合选择器。

其中基础选择器我之前写的有,这里不再多说。

复合选择器:

|-------|-------|--------|-------|---------|-------------|
| 选择器类型 | 后代选择器 | 子选择器 | 并集选择器 | 链接伪类选择器 | :focus伪类选择器 |
| 常用程度 | 常用 | 不常用但要会 | 常用 | 常用 | 待商定 |

其中,链接伪类选择器和 :focus伪类选择器都属于伪类选择器,而伪类选择器用于向某些选择器添加特殊的效果,其中,伪类选择器最大特点是用冒号(:)表示。

其中的颜色从白色变成黄色,鼠标放到该盒子时出现阴影都需要伪类选择器

1后代选择器:

.header h1 {

display: block;

width: 610px;

height: 50px;

color: #fff;

padding-top: 10px;

margin: 0 auto;

}

后代选择器格式:元素1+空格+元素2(可以在添加其它元素)

该模式表示:选择元素1里面的所有元素2(元素2是元素1的后代元素,即元素1包含元素2)

如:<div> <p> </p> </div>,p即是div中的后代元素。

要谨记:

1:元素1和元素2中间用空格隔开

2:元素1是父级,元素2是子级,最终选择的是元素2

3:元素2要是元素1的后代

4:元素1和元素2可以是任意基础选择器

如:

.nav1 ul li a {

color: #fff;

}

2子选择器:

与后代选择器要区分开,格式:元素1+>+元素2(可以在添加其它元素)

要记好,与后代选择器相比空格换成了>符号,且只能选择作为某元素最近一级的子元素,其中包含清梦的 <p> </p>标签是div标签的子元素,包含星河的<p> </p>标签是div标签的孙子元素。

要谨记:

1:元素1和元素2中间用大于号(>)隔开

2:元素1是父级,元素2是子级,最终选择的是元素2

3:元素2必须是亲儿子元素才行,其他的元素都不行

3并集选择器:

并集选择器格式:元素1,元素2(可以在添加其它元素)

并集选择器个元素之间的逗号是英文的要谨记(逗号表示:和的意思),改选择器表明:为多组标签同时为他们定义相同的样式。

如:

.content1, .content2, .content3, .content4 {

height: 510px;

margin: 10px auto;

margin-top: 20px;

}

4链接伪类选择器:

格式:

a:link (选择所有未被访问的链接)

a:visited (选择所有已被访问的链接)

a:hover (选择鼠标指针位于其上的链接,即还没有点击选项,只把鼠标停留在其上面)

a:active (选择活动链接(鼠标按下未弹起的链接))

其中的颜色从白色变成黄色,鼠标放到该盒子时出现阴影都需要伪类选择器

3属性:

属性很多,目前学的属性还不够,但可以做出一个静态的网页的大部分。

属性类型:font、text、background,其中font、text属性我之前写的有,这里的内容和之前的一样,看过的可以不看。

1字体属性:

简介:

font-family:设计字体系列的样式。

font-size:设计文字大小。

font-weight:控制字体粗细。

font-style:控制文本的风格。

font-family:后面跟字体的类型,该类型可以用汉字、英文等,但用英语是最合适的,英语的兼容性更好,其中font-family后面可以跟多种字体类型,但多种字体类型之间要用逗号(,)来隔开,并且这些字体类型都要写在引号中,这些字体类型尽量使用系统自带的字体,以确保用户在不同的浏览器中都能正常显示, 运行程序时电脑会先读取多种字体类型中的第一个,如果有则不在进行读取,此时电脑运行结果的字体类型就是此字体类型,否则电脑会继续执行此过程。

font-size:首先我们应该记住px(像素英语:pixel)是网页中最常用的单位,之后会经常见到,不同浏览器默认的文字大小是不一样的,比如说谷歌浏览器默认的文字大小是16px,在写程序时我们要尽量给定一个明确的大小,其中我们可以给程序中的body指定文字大小,就可以达到规定整个页面文字大小的作用 如:body{ font-size: 16px},此时就达到上述所说的效果,但要注意标题标签的文字大小要单独定义。

font-weight:控制字体粗细,正常情况下会默认字体不是粗的,即是normal,如果想加粗的话就要在该样式后面加bold,其中bolder是特粗体,lighter是细体,但我们却不常用英语来规定该样式,我们常用数字400(后面不用跟单位)来表示默认字体,用数字700(不用跟单位)来表示粗体。

font-style:控制文本风格,正常情况下会默认字体是normal即标准字体样式(该默认值normal常用来使倾斜的字体不在倾斜),样式后面跟italic会显示的字体是斜体。

字体简写属性:

格式:font: font-style font-weight font-size/line-height font-family;

例:font: italic 700 16px/20px 'Microsoft yahei';

注:此顺序不可更改且每个顺序之间要用空格隔开,此处的行高会在下文讲解,不设置的属性可以不写(系统会自动取默认值)但必须要保留font-size和font-family属性否则font属性将不会起作用。

2文本属性:

color:控制颜色。

text-align:控制设置元素内文本内容的水平对齐方式。

text-decoration:控制文本修饰。

text-indent:通常是将段落的首行缩进。

line-height:可以控制文字行与行之间的距离。

color:控制颜色,根据使用的选择器不同,改变颜色的东西也会不同,注意:文本颜色的表示有3种形式,1:预定义的颜色值(一般用英语来表示),2:十六进制(如:#FF0000,最常用的形式),RGB代码(如rgb(255,0,0)等,这个形式不常用,其中rgb是红绿蓝的缩写)。

text-align:控制设置元素内文本内容的水平对齐方式(可以参考我之前写的HTML中的表格),该样式后面跟:left(左对齐,默认值)、right(右对齐)、center(居中对齐)。

text-decoration:规定添加文本的修饰,可以给文本添加下划线、删除线、上划线,该样式后面可以跟none(默认,没有装饰线)、underline(下划线,链接a标签会自带下划线)、overline(上划线,几乎不用)、line-through(不常用),在网址中链接下面不会自带下划线,因此我们可以利用标签选择器,使链接下下划线删去,如: a { text-decoration: none}。

text-indent:属性用来指定文本的第一行的缩进,通常是将段落的首行缩进(可以简单理解为写作文时的每段开头空2格,这2格即为缩进),该样式后面跟:数字+单位,如:text-indent:20px,注意:数字前使正号,则会向右缩进,数字前使负号,则会向左缩进,其中我们需要记住 em 单位,em使一个相对单位,如果当前文字大小是16px,那么1em就是16px,2em就是32px,即1个em就是一个目前的文字大小。

line-height:该属性常用于设置行间的距离,可以控制文字行与行之间的距离,其中该样式后面也是跟:数字+单位,但该单位目前我所学到的只有px,其中行间距包含:上间距、文本高度、下间距。

3背景属性:

介绍:

1 background-color:

2 background-image:

3 background-repeat:

4 background-attachment:

5 background-position:

相关推荐
Apifox几秒前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95275 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿28 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端