HTML5 CSS3样式一_html5 css3 页内样式-CSDN博客

本文链接：https://blog.csdn.net/qq_44169342/article/details/124858678

CSS样式第一天

什么是CSS

美化网页，布局页面
HTML的局限性
css-网页的美容师
- CSS是层叠样式表的简称或者css样式表或者级联样式表
- 用于设置HTML页面的文本内容(字体、大小、对齐方式)、图片的外形，以及版面的布局和外观显示样式。
- 注意功能：由HTML专注做结构呈现，样式交给css,即结构(HTML)与样式(css)相分离。

CSS语法规范

//格式
<head>
      <style>
          选择器 {样式}
          给谁改样式 {改什么样式}
    </style>
</head>
// eg
<head>
    <style>
        p {
            color： red;
            font-size:12px;
        }
    </style>
</head>

css代码风格
- 样式格式书写
  1. 紧凑格式
    
    h3{color:deeppink;font-size:20px}
  2. 展开格式
  3. h3 {
    
    color: pink;
    
    }
注意样式大小写

CSS基础选择器

标签选择器

用Html标签名称作为选择器，按标签名称分类，为页面中某一类做统一的css样式
- 语法
  
  标签名 {
  
  属性1: 属性值2；
  
  属性2：属性值2；
  
  }
- 列子
```
p {
  color: green;
}
div {
  color: pink;
}
<p>
    男生
</p>
<div>
    女生
</div>
```

类选择器

语法

口诀：样式点定义结构类(class) 调用，一个人或多个，开发最常用

. 类名{
属性1： 属性值1；
 ....
}
//调用
<div class = '#'>
    变红色
</div>
// 举例
.red {
 font: 12px;
}
<p class ='red'>
    hello    
</p>

使用类选择器画盒子

<style>
    .red {
        width:10px;
        height:100px;
        background-coulor: red;   
    }
    .green {
        width : 100px;
        height:100px;
        background -color:green;
        
    }
</style>
<body>
    

<div class='red'>
   
    
</div>
<div class ='green'>
    
</div>
<div class ='red'>
    
</div>
    </body>

多类名

使用方式

<div class ="red font20" 亚瑟</div>

再标签class属性中写多个类名

多个类名中间必须用空格分开

<style>
    .red {
        color : red;
    }
    .font35 {
        font-size:35px;
    }
</style>
<body>
    <p class="red font35">
        蓝梓
    </p>
</body>

使用场景

可以把一些标签元素相同的样式(共同部分)放到一个类里面

这些标签都可以调用这个公共的类，然后再调用自己独有的类

节省css代码，统一修改方便

id选择器

Html元素以id属性设置id选择器CSS中id选择器以“ # ” 定义
- 语法
```
#id 名 {
属性1：属性值1；
......
}
#nav {
color:red;
}
// 例子
<style>
    #pink {
        color:pink;
    
        
</style>
<body>
    <div id ="pink">
        迈克尔杰克逊
    </div>
</body>
id选择器的口诀：样式#定义，结构id调用，只能调用一次，被人切勿使用
```
- id选择器和类选择器的区别
  - 类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
  - id选择器好比人的身份证号码，全国是唯一的，不得重复。
  - id选择器和类选择器最大的不同在于使用次数
  - 类选择器再修改样式中用最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

通配符选择器

通配符选择器使用 " * " 定义，表示选取页面中所有元素( 标签) *。

<style>
    * {
        color:red;
    }
    * 这里的 html body div span li 等等的标签都改为了红色
    不需要调用自动给所有的元素使用样式
</style>

字体样式

字体系列

font-family

p { font-family:"微软雅黑"}
div {
        font-family:Arial,"Microsoft Yahei "," 微软雅黑"；}
//各种字体之间必须使用英文状态下的逗号隔开

font-size: 定义字体大小

p {
font -size:20px;
}
// 标题标签比较特殊，需要单独指定文字大小

font-weight:字体粗细

p {
   font-weight: bold;//加粗
}
// font -weight:700;//加粗效果，后面不做单位
normal == 400 变细默认值字体

font-style:文字样式

属性值作用
normal 默认值，浏览器会显示标准的字体样式
italic 浏览器会显示倾斜的字体样式
```
p {
font-style: italic;
}
em {
// 倾斜的字体不倾斜
font - style:normal;
}
```

属性值	作用
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示倾斜的字体样式

font字体复合型用法

<style>
// 让div文字变倾斜，加粗，字号设置16像素，并且是微软雅黑
    div {
        font -style:italic;
        font-weight:700;
        font-size:16px;
        font-family:'we'
    }
</style>
<body>
    <div>
        你的酒馆对我打了
    </div>
</body>
// 另一种写法
body {
				font:  font-style  font-weight font-size/line-height   font-family;   
				font: normal/itacal(倾斜/不倾斜)  700（字体的粗细）  20px(行高)// 
微软雅黑(字体类型)			}
             <!-- 属性必须空格隔开 一定保留 font family和 font -size -->
			注意：这里顺序不可颠倒，并且各个属性以空格隔开</p>
// 不需要设置的属性可以省略(取默认值)，但必须保留font -size 和font -family 属性，否则font将不起作用

文本样式

color :文本颜色
text-align:对齐水平文本；center；right；left;
text-decoration:文本装饰；

属性值描述
none 默认，没有装饰线
underline 下划线。链接a自带下划线
overline 上划线
line-through 删除线
文本缩进：text-indent(段落首行缩进)

缩进2个字距离：2em;
line-height:行间距,包括了上间距，文本高度，下间距。

设置间距变上下间距；

line-height :26px;

量取方式：第一行文字的下沿到第二行文字的下沿；

属性值	描述
none	默认，没有装饰线
underline	下划线。链接a自带下划线
overline	上划线
line-through	删除线

CSS的三种引入方式

内部样式

<style>
    div {
        color: pink;
        text -align: center;
    }
</style>

外部样式
1. 新建xx.css文件
2. 在文件内部写入样式
3. 写入下面代码
```
<link rel ="stylesheet" href="xx.css">
```

行内样式


<p style="color:pink;">
    xxxxxxx
</p>

综合案例

Chrome 调试工具调试样式

Ctrl+滚轮放大开发者工具代码大小
左边html元素结构，右边css样式
如果点击元素，发现右侧没有样式引入，有可能是类名或者样式引入错误。
如果有样式，但是样式前面有黄色叹号提示，则样式属性书写错误。