css基础

原创已于 2022-05-31 20:16:44 修改 · 185 阅读

0 ·

CC 4.0 BY-SA版权

来将可留姓名

文章标签：

#css #css3 #html

于 2022-05-31 20:15:03 首次发布

css 专栏收录该内容

4 篇文章

订阅专栏

CSS基础

1.css引入的方式(4种)

1.1行内样式

<p style="font-size:16px">
    这是行内样式
</p>

1.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>

1.3外部引入样式表

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
       <link rel="stylesheet" href="文件地址+样式表的名称"/>
    </head>
    <body>
        <p>Hello everyone</p>
    </body>
</html>

1.4导入外部样式表

@import url(样式表文件的地址);

2.字体样式的属性

2.1 font-size:字号大小

font-size属性用于设置字号。推荐使用像素单位px。

2.1.1 单位px

px单位名称为像素，像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。
一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。
大多数浏览器的默认字体大小是16px。

2.1.2 单位em

em是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。

em单位有如下特点：

em的值并不是固定的;
em会继承父级元素的字体大小。

2.2 font-family:字体

font-family属性用于设置字体。可以使用如下CSS样式代码：

p{ 
    font-family:"Arial","微软雅黑";
}

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

注意:

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

2.3 font-weight:字体粗细

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

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

数字 400 等价于 normal，而 700 等价于 bold。但是我们更喜欢用数字来表示

2.4 font-style:字体风格

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

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

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

注意:平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

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

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

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

注意：

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

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

2.6总结

属性	描述
font-size	字号大小，单位(px:像素、em:字体长度)
font-family	字体样式，宋体、微软雅黑。。。。。。
font-style	字体风格
font-weight	字体粗细
font	综合字体样式

3.选择器

类型	描述
标签选择器	针对一类标签
ID选择器	针对某一个特定的标签使用
类选择器	针对你想要的所有标签使用
通用选择器	针对所有的标签都适用(不建议使用)

3.1 链接伪类选择器

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

4.css外观属性

4.1 line-leight: 行间距

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

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

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

基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。

一般项目中的页面的行高设置比字号大7~8像素左右就可以了, 比如当前使用14像素的字号，行高设为24像素左右合适。

4.2 text-algin:水平对齐方式

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