Day03-CSS-01-基础

小IU

已于 2022-06-01 08:23:40 修改

阅读量168

点赞数

分类专栏： HTML 文章标签： css css3 html

于 2022-05-31 20:30:34 首次发布

本文链接：https://blog.csdn.net/weixin_53984771/article/details/125072910

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS-01-基础

1.CSS简介

简洁的设计页面

1.1什么是CSS

层叠样式表用来控制界面的外观风格的文档主要设置HTML页面的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）

1.2CSS三个重要属性

浮动、定位和盒子模型

2.CSS使用方式

2.1行内样式

<!DOCTYPE html>
<html lang="en"
    <head>
		<title>This is title</title>
	</head>
	<body>
    	<p style="font-size: 16px; coloc: 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>内部样式表</p>
    </body>
</html>

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

2.3外部样式表

将样式写进.css后缀文件中

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

然后通过<link>元素引入

<!DOCTYYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <p>外部样式表</p>
    </body>
</html>

2.4导入外部样式表

css文件中通过@import引入其他css文件

@import url(index.css);

2.5css使用方法总结

外链样式：开发中经常使用
内联样式：定义的样式只在本页面生效
行内样式：多用于测试

3.CSS基本语法

选择器{
		 声明

	  属性	  值
   font-size: 18px;
}

选择器是要改变样式的HTML元素
每条样式声明包含一对属性名和属性值
属性名和属性值之间一(:)隔开
样式规则之间以分号(;)隔开

4.CSS字体样式属性

4.1font-size

font-size属性用于设置字号

4.1.1px

px单位名称是像素
大多数浏览器默认字体大小是16px，最小是12px

4.1.2em

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

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

4.2font-family: 字体

font-family属性用于设置字体。

p{
	font-family:'楷体','宋体';
}

可以同时指定多个字体，中间以逗号隔开，浏览器会不支持第一个字体会自动尝试下一个字体

注意：

现在网页默认字体为微软雅黑，字体大小为16px
字体之间要用英文下的逗号隔开

4.3font-weight:字体粗细

font-weight属性可以定义字体粗细

属性值	描述
normal	默认的
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体
100~900	定义更粗或更细的字体。400约为默认的。700等同于bold。

4.4font-style：字体风格

字体倾斜用css实现

属性值	描述
font-style	定义字体风格
normal	默认值
italic	斜体

4.5font综合设置字体样式

选择器{
		/* 加粗 */
		font-weight: bold;
		/* 斜体 */
		font-style: italic;
		/* 字体大小 */
		font-size: 2em;
		/* 字体 */
		font-family: 'Arial''楷体';
		/* 上面的四行代码等价于下面这一行 */

		/* font: bold italic 2em '楷体'; */
}

font-weight和font-style 这两个可以不写font-size必须写在font-family前面，各个属性以空格隔开。

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

5.选择器

5.1标签选择器

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

选择页面中的<p>元素设置字体大小和颜色

5.2class选择器

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

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

5.3ID选择器

#nav{
	font-size: 20px;
	color: green;
}

选择页面中ID属性值是nav类名的所有元素设置字体颜色和大小

ID选择器和类选择器区别

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

5.4通配符选择器

*{
	font-size: 20px;
	color: green;
}

5.5 链接伪类选择器

<style>
			/* 链接伪类选择器 */
			a:link {
				color: black;
				text-decoration: none;
			}
			/* 悬停伪类 */
			a:hover {
				color: red;
			}
			/* 活跃伪类 */
			a:active {
				color: aqua;
			}
			/* 访问过后的伪类 */
			a:visited {
				color: green;
			}
</style>

注意：

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

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

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

6.CSS外观属性

6.1color: 文本颜色

属性名	color
属性值	预定的颜色名\|十六进制值的颜色\|RGB颜色
默认值	大部分浏览器默认为黑色
描述	设置文本的颜色

6.2颜色半透明

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

6.3line-height：行间距

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

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

normal：默认值。行高由浏览器自动处理。

6.4text-align：水平对齐方式

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

left内容左对齐
center内容水平居中对齐
right内容右对齐

6.5text-indent：首行缩进

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

6.6text-decoration：文本修饰

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

none指文字无装饰
underline下划线装饰
overline上划线装饰
line-through贯穿线装饰

6.7letter-spacing：字符间距

属性名	letter-spacing
属性值	normal
默认值	normal
描述	增加或减少字符间的空白

6.8word-spacing（单词）

属性名	word-spacing
属性值	normal\|length
默认值	normal
描述	增加或减少字符间的空白

6.9文字阴影

可以给文字添加阴影效果

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

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

前两项是必须写的。后两项可以选写。

/* 多重阴影 */
text-shadow: -5px 0px cyan, 5px 0px red;

小IU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day03-CSS-01-基础

简洁的设计页面层叠样式表用来控制界面的外观风格的文档主要设置HTML页面的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）浮动、定位和盒子模型2.2内部样式表2.3外部样式表将样式写进.css后缀文件中然后通过元素引入2.4导入外部样式表css文件中通过@import引入其他css文件2.5css使用方法总结外链样式：开发中经常使用内联样式：定义的样式只在本页面生效行内样式：多用于测试3.CSS基本语法选择器是要改变样式的HTML元素每条样式声
复制链接

扫一扫