CSS第一天

最新推荐文章于 2024-07-09 17:45:40 发布

Coco sun.

最新推荐文章于 2024-07-09 17:45:40 发布

阅读量213

点赞数 5

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/fjhkrje/article/details/120108326

版权

css 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

CSS第一天

1.CSS初识

概念：

CSS(Cascading Style Sheets)，通常称为CSS样式表或层叠样式表（级联样式表）
作用：
- 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边
  距等)以及版面的布局和外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2.引入CSS样式表（书写位置）

2.1行内式(内联样式)

概念：

称行内样式、行间样式；
是通过标签的style属性来设置元素的样式。

其基本语法格式如下：

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

案例：

<div style="color:red; font-size: 12px;">
    青春不常在，抓紧谈恋爱
</div>

2.2内部样式表(内嵌样式表)——部分结构和样式相分离

概念：

称内嵌式
是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

其基本语法格式如下:

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

<style>
	div {
		color: red;
		font-size: 12px;
    }
</style>

注意：
- style标签- 般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type=“text/css” 在html5中可以省略。
- 只能控制当前的页面
- 没有彻底分离（缺点）

2.3外部样式表(外链式)——完全实现结构和样式相分离

概念：

称链入式
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中
通过link标签将外部样式表文件链接到HTML文档中

其基本语法格式如下：

<head>
    <link rel="stylesheet" type="text/css" href="css文件路径"
</head>

注意：
- link是个单标签
- link标签需要放在head头部标签中，并且指定link标签的三个属性

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

3.总结CSS样式规则

在这里插入图片描述

总结:
1.选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文":“连接。
5.多个“键值对"之间用英文”,"进行区分。

4.CSS基础选择器

标签选择器

标签选择器，
页面同选起。
直接写标签，
全部不放弃。

类选择器（已练习）

差异化选择，
一个或多个。
上面点定义，
类名别写错。
谁用谁调用，
class来做。

若是多类名，则：

<style>
	.red{
		color:pink;
	}
    .font{
        fontsize:100px;
    }
</style>
<body>
    <div class="red font"> dududu </div>
</body>

id选择器 (用于页面唯一性元素身上)
- 元素的id值是唯一的，只能对应于文档中某一个具体的元素。
- 用法基本和类选择器相同。
- id选择器（仅一次）和类选择器（多次）最大的不同在于使用次数上。
```
<style>
    #red{
        color:red;
    }
</style>
<body>
    <div class="red">
        dudududududu
    </div>
</body>
```
通配符选择器

通配符选择器用*号表示，就是选择所有的标签他是所有选择器中作用范围最广的。能匹配页面中所
有的元素。
```
*{
	margin: 0;/*定义外边距*/
	padding: 0;/*定义内边距*/
}
```

5.font字体

5.1、font-family 定义字体

font-family:"微软雅黑"，arial;

5.2、font-size 字体大小

font-size:18px;font-size:150%;font-size:xx-small,x-small,small,medium,large,x-large,xx-large;font-size:smaller,larger;

5.3、font-style 字体样式

平时我们很少给文字加斜体，反而喜欢给斜体标签(em, i)改为普通模式。

font-style:normal,italic,oblique;

5.4、font-weight 字体粗细

400等同于normal, 而700等同于bold 我们重点记住这句话

font-weight:normal,bold,bolder,lighter,100-900;

5.5、font-variant 使输入不受大小写限制

font-variant: normal,small-caps;

5.6、font属性的简写

font:  bold italic 18px  arial ;

6.CSS外观属性

6.1 color:文本颜色

作用：color属性用于定义文本的颜色

取值方式：

表示	属性值
预定义的颜色	red，green，blue，还有我们的御用色pink
十六进制	#FF000O，#FF6600， #29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

注意：我们实际工作中，用16进制的写法是最多的，而且我们更喜欢简写方式比如#f00代表红色

6.2 text-align:文本水平对齐方式

作用：text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

属性值如下：

属性	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

注意：是让盒子里边的内容水平居中，而不是让盒子居中对齐

6.3 line-height:行间距

作用：
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高

单位：
line-height常用的属性值单位有三种，分别为像素px 相对值em 百分比%

6.4 text-indent：首行缩进

作用：
text-indent属性御用设置首行文本的缩进

6.5 text-decoration 文本的装饰

作用：
通常用于给超链接修改装饰效果

值	描述
none	默认。定义标准的文本。取消下划线（最常用）
underline	定义文本下的一条线。下划线也是我们链接自带的（常用）
overline	定义文本下的一条线（不用）
line-through	定义穿过文本下的一条线（不常用）

6.6 css外观属性总结

属性	表示	注意点
color	颜色	我们通常用十六进制比如而且是简写形式#fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离text-indent: 2em;
text-decoration	文本修饰	记住添加下划线underline 取消下划线none

注：本文根据《黑马程序员-web前端》笔记改写

Coco sun.

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
CSS第一天

CSS第一天1.CSS初识概念： CSS(Cascading Style Sheets)，通常称为CSS样式表或层叠样式表（级联样式表）作用：主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。2.引入CSS样式表（书写位置）2.1行内式(内联样式)概念：称行内样式
复制链接

扫一扫