CSS3学习笔记（1）_muyu css-优快云博客

本文链接：https://blog.youkuaiyun.com/muyu_night/article/details/117916633

本文详细介绍了CSS，一种用于定义HTML文档外观和格式的样式语言。内容涵盖CSS的优势，如样式复用、布局控制和多设备适配，并列举了添加CSS的三种方式。文章深入解析了@font-face规则、字体样式、背景设置、字体家族、尺寸控制、边距调整等关键概念，同时提及了ID和Class在CSS中的应用。此外，还提供了关于高度、宽度和边距的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是CSS

CSS是一种样式语言，它定义了HTML文档的表示形式，例如，CSS涵盖了字体、颜色、边框、线条、高度、宽度、背景图像等等（如果说HTML是骨架的话，那么CSS就是身体上的肌肉，衣服，让这个“人”能够动起来，更好看）

CSS的优势

用一个样式表控制多个文档的表示;
更准确地检查布局;
适用于不同媒体类型的不同演示文稿;
能够有许多先进和复杂的技术

在哪添加CSS

主要有三种方法。
第一种方法是直接写在一行中。
第二种方法是在(内部)文档标题中定义一组表示样式
第三种方法是设计一个包含所有(外部)样式的文件，单独进行定义

CSS元素

@font face

font face 作用是你可以使用你自己的字体而不必依赖网上的字体，使页面字体不再依赖操作环境

@font-face
{
	font-family: 'BallparkWeiner';
	src: url('polices/ballpark.eot');
	src: url(polices/ballpark.eot?#iefix) format('embedded-opentype'),
	url('polices/ballpark.woff') format('woff'), 
	url('polices/ballpark.ttf') format('truetype'), 
	url('polices/ballpark.svg#BallparkWeiner') format(svg);
}

这里可以看到我加入的是BallparkWeiner字体，url个人感觉更像是加入一个链接（无论是文件链接还是网络链接）
.woff,.eot.ttf均为字体文件
format指的是css格式化
这玩意在开头写

font-weight/font-style

分别设置字体的大小（weight）和风格（style）

@font-face
{
	font-family: 'BallparkWeiner';
	src: url('polices/ballpark.eot');
	src: url(polices/ballpark.eot?#iefix) format('embedded-opentype'),
	url('polices/ballpark.woff') format('woff'), 
	url('polices/ballpark.ttf') format('truetype'), 
	url('polices/ballpark.svg#BallparkWeiner') format(svg);
	font-weight: normal;
    font-style: normal;
}

这里有几个选择，可以填写normal(正常），italic（斜体），oblique（倾斜），inherit（继承上一个元素的字体）

background

设置背景，加个照片什么的

font-family

表示为段落设置字体
sans-serif/serif 表示无衬线/有衬线字体

body
{
background:url('www.baidu.com');
font-family:'Trebuchet MS', Arial,sans-serif;
color:#181818;
}

id class

id和class这个本是属于html里的东西，但是主要还是配合css来用的，所以我就这里来说了，他们作用相当于贴个标识，到时候你修饰的时候直接在用相对应的符号直接“连接”上

<DIV id="bloc_page">
</DIV>

比如说像这里我加了id，那么到CSS修饰的时候

#bloc_page  /* # car c'est un id dans le fichier html */
{

}

这里我就可以对他进行修饰了
class也是一样的道理，特别注意的是：
id对应的是#
class对应的是.
另外：id对应唯一名字的变量，class则可以重复使用相同名字的变量

height width

设置高度和宽度

p
  {
  height:100px;
  width:100px;
  }

margin

设置边框大小

{
margin：10px 15px 11px 13px;
}

这里分别表示
上外边距是 10px
右外边距是 15px
下外边距是 11px
左外边距是 13px

{
margin：10px 15px 11px;
}

这里分别表示
上外边距是 10px
左右外边距是 15px
下外边距是 11px

{
margin：10px 15px;
}

这里分别表示
上下外边距是 10px
左右外边距是 15px

{
margin: 10px;
}

这里表示上下左右均为10