Day_03 CSS

最新推荐文章于 2024-04-21 14:30:45 发布

grp_grp_grp

最新推荐文章于 2024-04-21 14:30:45 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/grp_grp_grp/article/details/123100655

1. CSS初识

CSS(Cascading Style Sheets) 主要用于美化样式。

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2. 样式表

2.1 内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

2.2 行内样式表

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

2.3 外部样式表

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

3. CSS字体属性

3.1 font-size:字号大小

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

3.2 font-family:字体

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

3.3 font-weight:字体粗细

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

font-weight属性用于定义字体的粗细，其可用属性值：

normal、bold、bolder、lighter、100~900（100的整数倍）。

3.4 font-style:字体风格

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

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

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

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

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

4. CSS外观属性

4.1 color:文本颜色

预定义的颜色值，如red，green，blue等。

十六进制，如#FF0000，#FF6600，#29D794等

RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

4.2 line-height:行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7.8像素左右就可以了。

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

4.3 text-indent:首行缩进

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

5. 基础选择器

5.1 标签选择器（元素选择器）

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者

元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

特点：

1. 标签选择器能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

2. 标签选择器可以把某一类标签全部选择出来。

5.2 类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签调用的时候用class=“类名”即可。

类选择器的优势：

1. 可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。

小技巧：

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
3.不要纯数字、中文等命名，尽量使用英文字母来表示。

5.3 多类名选择器

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

5.4 id选择器

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

id选择器和类选择器区别

W3C规定，在同一个页面不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器(class)好比人的名字，可以多次重复使用的，比如：张伟、王伟、李伟、李娜。

id选择器好比人的身份证号码，全中国是唯一的，不得重复。

id选择器和类选择器最大的不同在于使用次数上。

5.5 通配符选择器

* {
margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

6. 复合选择器

6.1 交集选择器

6.2 并集选择器

6.3 后代选择器

6.4 子代选择器

7. 伪类选择器

链接伪类选择器

:link /* 未访问的链接 */

:hover /* 鼠标移动到链接上 */

:active /* 选定的链接 */

:visited /* 已访问的链接 */

注意写的时候，他们的顺序尽量不要颠倒，按照lhav的顺序。

8. 标签显示模式

8.1 块状元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有h1-h6/p/div/ul/li/ol/dl/dd/dt/table/tr/td/caption/form等，其中<div>标签是最典型的块元素。

块级元素的特点：

1、有默认的宽高，宽是父元素的100%，高度是内容所撑起来的高度

2、宽高可以设置

3、独占一行

4、可以容纳任意的元素（h/p元素不能容纳块状元素）

5、可以设置外边距和内边距的

8.2 行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素的特点：

1、有默认的宽高，宽高是内容所撑起来的

2、宽高设置是无用的

3、相邻的行内元素或者行内块元素在同一行上显示

4、只可以容纳行内元素与内容

5、水平方向上的外边距和内边距可以设置，垂直方向设置无用

8.3 行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<label>、<select>、<option>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

1、有默认的宽高，是元素本身的宽高

2、宽高是可以设置的

3、相邻的行内元素或者行内块元素在同一行上显示

4、一般不容纳其他元素

5、外边距和内边距都是可以设置的

8.4 标签显示模式转换

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

9. CSS背景

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色背景图片地址背景平铺背景滚动背景位置