css基础

最新推荐文章于 2024-11-19 20:40:54 发布

原创最新推荐文章于 2024-11-19 20:40:54 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

html 同时被 2 个专栏收录

10 篇文章

订阅专栏

学习笔记

4 篇文章

订阅专栏

html决定结构，css控制样式，js决定行为。

css能把样式和内容分开。后面的样式会覆盖前面相同的样式。

样式表由选择器和声明两部分组成，选择器标识格式的元素，声明用于定义样式。

层叠样式表引入方式有：行内样式表（内联样式表:只用于当前元素）｛style=”” ｝ > 内部样式表｛<style> ｝ > 外部样式表｛<link rel=”stylesheet” href=””> ｝ > 导入｛@import url (“test.css”);｝

选择器：id选择器>类选择器>标签选择器>通配符选择器

1.background-repeat 背景图片是否重复
repeat-x 图片在横向上平铺
repeat-y 图片在纵向上平铺
no-repeat 不重复平铺

2 opacity 设置颜色的透明度

3 font-variant 指定文本是否为小型的大写字母

4 font-weight 指定文字的粗细

以数字表示粗细，范围100~900（600以下是细体，600以上是粗体）

5 text-decoration:none 可以去掉超链接的下划线

6.background-attachment：背景图片是否随内容滚动
fixed 背景图像相对于窗体固定，滚动条滚动图像不动，但它的容器会消失
scroll 滚动条动会跟着动

7 letter-spacing：改变字间距

8 text-overflow 文字溢出
clip 文本溢出时将超出部分裁切掉
ellipsis 溢出文本以省略号显示

9 text-transform 设置对象中的文本的大小写默认值none
capitalize 将每个单词的第一个字母转换成大写
uppercase 全部转换成大写
lowercase 转换成小写

10 text-decoration 有关文字的修饰
underline 下划线
overline 上划线
line-through 删除线

11. vertical-align 设置元素相对于内容的垂直对其方式

12 word-wrap:break-word 设置当前行超过指定容器的边界时自动换行

注意：

1.一个html中id是唯一的

2.把溢出的字变为省略号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			      p{ 
			      	height: 20px; 
			      	width:100px;  
			      	white-space: nowrap; 
			      	text-overflow: ellipsis; 
			      	overflow: hidden;}

		</style>
	</head>
	<body>
		<p>
			哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
			哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
		</p>
	</body>
</html>

效果