前端学习 CSS

CSS语法规范

<head>
  <style>
    h1{
      color:red;
      font-size:12px;
    }
  </style>
</head>
<body>
  <h1>标题</h1>
</body>

选择器 {一条或多条声明}

选择器和大括号中间最好加个空格

基础选择器

标签选择器
<style> 
  p {
    color: red;
  }
<style>

<p>12</p>
<p>12</p>
<p>12</p>

选择了所有的对应标签

类选择器
.类 {

}
<p class="类">123</p>

长名词或词组可以使用中横线来给选择器命名 -

多类名选择器
<div class="类名 类名"><div>
id选择器
#id {

}
<div id=""></div>

id只能调用一次，调用后别人无法使用

和类一样只能用英文，相比而言id用得少

通配符选择器
* {

}
选择所有的标签

字体属性

字体
font-family: ''

多个字体，如果前面的显示不出来会用后面的替换

文字大小
body {
  font-size:16px;
}
h {
  font-size:16px;
}
body可选择所有主体，但是标题标签需要特别指定
字体粗细
font-weight:
700或者bold 加粗
文字样式
font-style: 
normal 正常
italic 斜体
字体复合属性
格式：font: font-style font-weight font-size/line-height font-family;
font: italic 700 16px 'Microsoft yahei'

顺序不能颠倒

文字大小和字体不能省略

文本属性

颜色
color: pink;
color: #FF0000
color: rgb(255,0,0)或者rgb(100%,0%,0%)
对齐文本
text-align: center
left right center

用来设置水平对齐

装饰文本
text-decoration:
none 默认
underline 下划线
overline 上划线
line-through 删除线
文本缩进
text-indent:
让每个首行缩进
em是一个相对单位，是当前元素的一个文字大小
行间距
line-height:

行间距包括上间距，文本高度，下间距

16px为默认值

样式表

内部样式表

  • 控制整个HTML界面

  • 没有完全分离

行内样式表
  • 修改简单样式
  • 不推荐大量使用
<p style = "color: blue"></p>
外部样式表
  • 在外面写一个CSS，之后引用
  • 最推荐使用
在HTML外部写一个CSS
<head>
<link rel="stylesheet" href="样式表名字.css">
</head>
posted @ 2022-03-29 17:59  旅者与他的雄关漫道  阅读(26)  评论(0)    收藏  举报