Web实训-day03：CSS基础

最新推荐文章于 2024-02-02 11:29:23 发布

懒虫啊~

最新推荐文章于 2024-02-02 11:29:23 发布

阅读量669

点赞数 1

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/qq_23104703/article/details/106867351

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2. CSS使用方式(3种)

2.1 行内样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
    </head>
    <body>
        <p style="font-size: 16px; color: red;">大家好</p>
    </body>
</html>

行内样式需要写到标签的 style 属性值中。

2.2 内部样式表

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <style>
            p {
                font-size: 16px;
                color: red;
            }
        </style>
    </head>
    <body>
        <p>Hello everyone</p>
    </body>
</html>

内部样式需要写到 <style> 标签中。

2.3 外部样式表

链接式

将样式写到单独的文件中，文件的扩展名为 .css。例如，index.css 文件中有如下样式：

p {
    font-size: 16px;
    color: red;
}

然后通过 <link> 元素将 index.css 文件引入到页面中：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <link rel="stylesheet" type="text/css" href="./css/index.css">
    </head>
    <body>
        <p>我是优秀的前端开发工程师</p>
    </body>
</html>

css使用方式总结

定义在外部文件（外链样式）：开发中主要是通过这种形式定义样式。（推荐）
在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。
定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。（不推荐）

3. CSS基本语法

CSS 样式由一系列的规则集组成，规则集中有一条或多条样式声明，每条样式声明包含着一对属性名和属性值，属性名和属性值之间以冒号（:）隔开，样式规则之间以分号（;）隔开，最后一对样式声明后面可以省略分号。

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

4. CSS字体样式属性

4.1 font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：

4.1.1 px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的，一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。

4.1.2 em

em是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。若用于其他属性（width,height），则是相对于本身元素的font-size。

em单位有如下特点：

em的值并不是固定的;
em会继承父级元素的字体大小。
我们知道任意浏览器的默认字体大小都是16px。所有未经调整的浏览器都符合: 1em=16px。

em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算了，这不怎么方便，还好rem解决了这个问题。

4.1.3 rem

rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

注意点:

rem 单位是由 html 元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。

4.2 font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ font-family:“微软雅黑”,“楷体_GB2312”;}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mvHgNqZQ-1592612730131)(images/good.png)]常用技巧：

现在网页中普遍使用16px、字体是微软雅黑。
尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
各种字体之间必须使用英文状态下的逗号隔开。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

4.3 font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用css 来实现，但是css 是没有语义的。

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

属性值

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100~900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u2dudGJa-1592612730134)(images/good.png)]小技巧：数字 400 等价于 normal，而 700 等价于 bold。但是我们更喜欢用数字来表示。

4.4 font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用css 来实现，但是css 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FjkXd3NL-1592612730135)(images/good.png)]小技巧：平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

4.5 font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight  font-size  font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

开发者工具（chrome）

此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：

“按F12”或者是 “shift+ctrl+i” 打开开发者工具。

菜单：右击网页空白出—查看

小技巧：

ctrl+滚轮可以放大开发者工具代码大小。
左边是HTML元素结构右边是CSS样式。
右边CSS样式可以改动数值和颜色查看更改后效果。

5. CSS注释

CSS规则是使用     /*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。

例如：

{

font-size: 14px;                 /* 所有的字体是14像素大小*/

}

6. 选择器

6.1 基本选择器（重点）

6.1.1 标签选择器

p {
    font-size: 16px;
    color: red;
}

选择页面中所有的 <p> 元素，给它们设置字体大小和颜色。

6.1.2 Class 选择器

.box {
    font-size: 20px;
    color: green;
}

选择页面中 class 属性值中包含 box 类名的所有元素，给它们设置字体大小和颜色。

6.1.3 ID 选择器

#nav {
    font-size: 24px;
    color: blue;
}

选择页面中 id 属性值是 nav 的元素，给它设置字体大小和颜色。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜
id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

6.1.4 通配符选择器

* {
    font-size: 24px;
    color: blue;
}

6.2 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

为了和我们刚才学的类选择器相区别，  类选择器是一个点 比如 .demo {}   而我们的伪类 用 2个点 就是 冒号  比如  :link{}

6.2.1 链接伪类选择器

:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */

提示：

在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！

a:active 必须位于 a:hover 之后，这样才能生效！

a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
		}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

温馨小提示

a:link会对拥有a标签的属性href=""，即拥有实际链接地址的a对象发生效果

*我可以

CSS的基本选择器有几种？

基本选择器：

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）

7. CSS外观属性

7.1 color：文本颜色

属性名	color
属性值	预定义的颜色名 \| 十六进制值的颜色值 \| RGB颜色值
默认值	在不同浏览器中，默认值可能不同，但是在大部分浏览器中默认值为黑色。
描述	设置文本的颜色

小技巧：

1.一般情况下颜色我们喜欢小写字母比如 #ff0000。

2.css我们颜色简写比如 #ff0000 可以简写为 #f00 #ff00ff 简写为 #f0f

7.2 line-height：行间距

行高是指文本行基线间的垂直距离。

属性名	line-height
属性值	normal \|数字 \| 长度值 \| 百分比
默认值	normal
描述	设置文本的行高

normal：默认值，行高由浏览器自动处理。
数字：行高 = 数字 * 字体大小，例如，line-height: 2;font-size: 16px;，则行高等于：2 * 16px = 32px
长度值：使用长度值设置行高，例如，line-height: 32px。
百分比：基于当前字体大小的百分比。

小技巧：

基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。
一般页面中的行高设置比字号大7~8像素左右就可以了, 比如当前使用14像素的字号，行高设为24像素左右合适。

7.3 text-align：水平对齐方式

属性名	text-align
属性值	left \| right \| center \| justify
默认值	如果文本方向为ltr，则默认值为left；如果文本方向为rtl，则默认值为right
描述	设置文本在水平方向上的对齐方式

**left：**内容左对齐。
**center：**内容居中对齐。（重点）
**right：**内容右对齐。
**justify：**内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。

7.4 text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

7.5 text-decoration：文本修饰

文本修饰

属性名	text-decoration
属性值	none \| underline \| overline \| line-through
默认值	none
描述	对文本进行修饰

**none：**指定文字无装饰
**underline：**指定文字的装饰是下划线
**overline：**指定文字的装饰是上划线
**line-through：**指定文字的装饰是贯穿线

7.6 text-transform：大小写转换

文本的大小写

属性名	text-transform
属性值	capitalize \| uppercase \| lowercase \| none
默认值	none
描述	控制文本的大小写

**none：**无转换
**capitalize：**将每个单词的第一个字母转换成大写
**uppercase：**将每个单词转换成大写
**lowercase：**将每个单词转换成小写

7.7 letter-spacing：字符间距

字符间距

属性名	letter-spacing
属性值	normal \| 长度值
默认值	normal
描述	增加或减少字符间的空白（字符间距）

**normal：**默认间隔
**长度值：**用长度值指定间隔。可以为负值。

7.8 word-spacing（单词）

单词间距

属性名	word-spacing
属性值	normal \| length
默认值	normal
描述	增加或减少单词间的空白(即字间隔)

**normal：**默认间隔
**length：**用长度值指定间隔。可以为负值。

7.9 颜色半透明(css3)

文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：

    color: rgba(r,g,b,a)  a 是alpha  透明的意思  取值范围 0~1之间    color: rgba(0,0,0,0.3)

7.10 文字阴影(CSS3)（了解）

以后我们可以给我们的文字添加阴影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

8. CSS书写规范

开始就形成良好的书写规范，是你专业化的开始。

8.1 标识符规范

【建议】小写。

示例：

/* good */
.username{
   color:red;
}

/* bad */
.USERNAME{
   COLOR:RED;
}

8.2 选择器规范

【建议】选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

示例：

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

8.3 属性规范

【强制】属性定义必须另起一行。

示例：

/* good */
.selector{
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【强制】属性定义后必须以分号结尾。

示例：

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}https://blog.csdn.net/csdnnews/article/details/93806799)

3 级，位置靠后的限定条件应尽可能精确。

示例：

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

8.3 属性规范

【强制】属性定义必须另起一行。

示例：

/* good */
.selector{
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【强制】属性定义后必须以分号结尾。

示例：

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}https://blog.csdn.net/csdnnews/article/details/93806799)

懒虫啊~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录