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:

相关推荐
zqx_71 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己1 小时前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称2 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色2 小时前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2342 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
BigYe程普3 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
神之王楠3 小时前
如何通过js加载css和html
javascript·css·html
余生H3 小时前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍3 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发