HTML+CSS---进阶学习02

最新推荐文章于 2024-10-05 16:51:11 发布

不断进阶学习者

最新推荐文章于 2024-10-05 16:51:11 发布

阅读量163

点赞数

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

本文链接：https://blog.csdn.net/weixin_44857287/article/details/108986195

版权

HTML+CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、css样式的引入方式

1.内部样式

位置：在head标签里写style标签，在style标签里写样式

 <style>
 /*
 语法：
 选择器{
 	属性名：属性值;
 	属性名：属性值;
 }
 
 */
        div{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>

2.行间样式

语法： <标签 style=“属性名:属性值; 属性名:属性值;”></标签>

<div style="width: 200px;height: 200px;background-color: green;"></div>

3.外部样式

首先建一个.css的文件，在html页面中的head标签里使用link标签引入

 <link rel="stylesheet" href="./style.css">
 <link rel="stylesheet" href="./style.css" type="text/css">

rel属性 : 代表当前文件和要引入文件的关系

href属性：设置要引入文件的路径

type属性：指定引入文件的类型

一个css文件可以在多个html页面里引入，一个html页面可以引入多个css文件

二、css引入方式的优先级

一般情况下：行间样式 > 内部样式 > 外部样式（内部和外部遵循就近原则）

三、选择器

1.标签选择器

 div{
   background-color: red;
}

2.class选择器（类选择器）

在标签上设置class属性，在css里通过点加上class值选中

一个标签上可以设置多个class名，多个class名中间用空格隔开
一个class名可以在多个标签上设置

  <div class="dili">迪丽热巴</div>
    <p class="dili reba">迪丽热巴</p>
    <span class="dili">neirong</span>
    
     <style>
        .dili{

            background-color: red;
        }
        .reba{
            width: 100px;
            height: 100px;
        }
    </style>

3.id选择器

设置的id名必须要具有唯一性

一个标签只能设置一个id名，该id名在整个页面里是唯一的

 <div id="dili">迪丽热巴</div>
 
  #dili{
            width: 100px;
            height: 100px;
            background-color: red;
}

4.id和class命名规则

由数字，字母，下划线，中划线组成
必须以字母开头
命名有语义，比如头部 head 底部 foot 导航 nav
区分大写

四、选择器优先级

id > class > 标签选择器

五、字体样式

1.字体大小font-size （可以继承）

浏览器默认字体大小是16px ，支持最小字体12px
继承来的样式的优先级小于自身所设置的样式

2.字体 font-family （可以继承）

 font-family: '黑体' , '楷体';

可以设置多个，多个字体之间用逗号隔开，字体要加上引号
多个字体的时候，首先看第一个字体，用户的电脑上是否有，如果没有找第二个字体，如果设置的字体用户电脑上都没有，就用默认的字体
安全字体：黑体，楷体，宋体，微软雅黑

3.字体倾斜font-style （可以继承）

 font-style: italic;

italic 倾斜

normal 不倾斜

4.字体加粗font-weight（可以继承）

 font-weight: bold;

bold 加粗

normal 不加粗

100-900 （100-550 不加粗， 551-900 加粗）

5.行高 line-height(可以继承)

line-height: 40px; 
line-height: 2; //如果不带单位，就是字体大小的倍数

6.复合写法

font: italic bold 20px/40px '黑体';
//font : 是否倾斜  是否加粗  字体大小/行高  字体

六、文本样式

1.文字颜色color （可以继承）

color: red;

颜色的表示方法
- 英文单词 red green
- 十六进制 #加六位（0-9 a-f)
  - #ff0000 代表红色可省略为 #f00
  - #00ff00 代表绿色
  - #0000ff 代表蓝色
- rgb(255,0,0) 代表红色，可设置的值 0-255
- 第一个值代表的是红色
- 第二个值代表绿色
- 第三个值代表蓝色
- rgba( )
  - 第一个值代表的是红色
  - 第二个值代表绿色
  - 第三个值代表蓝色
  - 第四个值代表透明度（0-1）其中0表示完全透明，1表示不透明

2.首行缩进 text-indent (可以继承)

 text-indent: 2em;  em代表当前字体大小的倍数

3.文字的水平对齐方式 text-align(可以继承)

  text-align: center  |  left(默认) | right  | justify (一段文字两端对齐);

注意，给块元素设置text-align 里边的内联标签和内联块标签也可居中显示
单行文字垂直居中, 设置行高的值和高度一样即可
```
  height: 50px;
 line-height: 50px;
```

4.文本装饰 text-decoration

 text-decoration: line-through;  中划线
 underline 下划线
 overline   上划线
 none  无

text-decoration: line-through double red;
   中划线   线条的样式   线条的颜色
   线条的样式： double  双实线
              solid   实线
              dotted  点状的
              dashed  虚线
              wavy    波浪线

注意：给父元素设置文本装饰，里边的子元素有文本装饰，但是，自己再设置文本装饰，不会覆盖掉父元素的

5.文字间距

 letter-spacing: 20px; 字母与字母之间的距离
word-spacing: 20px;   单词与单词之间的距离

七、css单位

px 固定单位
em 相对于当前标签字体大小的倍数
% 相对于父元素的百分比
rem 相对于根标签字体大小的倍数

八、表格

之前是用表格来布局，现在页面中明显是表格的部分才用表格

1.表格相关标签

table 所有的表格内容都要放到table标签里
tr 代表一行
td 代表一个单元格
th 代表一个单元格，有标题的语义
caption 表格的标题
thead 表示表格的头部
tbody 表格的主体
tfoot 表格的页脚
- thead tbody tfoot好处
  - 如果thead tbody tfoot 写反了，也可以正常显示
  - 如果页面表格中数据特多的情况，他会加载一个tbody显示一个

表格相关属性

border ：给table标签设置, 给每个单元格和整个表格加上边框
cellspacing ：给table标签设置，设置单元格与单元格之间的距离
cellpadding : 给table标签设置，设置内容与边框之间的距离
width ：给单元格设置，给其中一个单元格设置宽度，那他所在那一列的宽度都会变
height : 给单元格设置，给其中一个单元格设置高度，那他所在那一行的高度都会变
colspan : 给单元格设置，设置的值是要横跨的列数，跨列合并
rowspan: 给单元格设置，设置的值是要横跨的行数，跨行合并
align：可以给tr td table 设置，给tr设置的话是一行里的单元格内容都水平居中， td具体的某一个单元格，table设置，整个表格在浏览器上居中

3.表格相关样式

 table{
            /* border-collapse: collapse; */  合并单元格边框
            border-collapse: separate; 默认值，不合并
            border-spacing:10px ;  设置单元格与单元格之间的距离，配合 border-collapse: separate;使用
        }