devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

灯塔：CSS笔记（1）

作者：2023面试高手 | 2024-03-06 23:50:08

赞

踩

灯塔：CSS笔记（1）

CSS：层叠样式表

所谓层叠 即叠加的意思，表示样式可以一层一层的层叠覆盖

css写在style标签中，style标签一般写在head标签里面，title标签下面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         p{
  9.             /*  */
  10.             color: white;
  11.             /*  */
  12.             font-size: 30px;
  13.             /*  */
  14.             background-color: black;
  15.             /*  */
  16.             width: 300px;
  17.             height: 400;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <p>这是一个p标签</p>
  23. </body>
  24. </html>

CSS的引入方式：

内嵌式：CSS写在style标签中

style标签虽然可以写在页面的任意位置，但是通常约定写在head标签中

 外联式：CSS写在一个单独的.css文件中

需要通过link标签在网页中引入

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. //stylesheet 样式表
  8.     <link rel="stylesheet" href="./my.css">
  9. </head>
  10. <body>
  11.     <p>
  12.         活在当下 
  13.     </p>
  14. </body>
  15. </html>
  1. p{
  2.     color: aquamarine;
  3. }
 行内式：CSS写在标签的style属性中 配合js使用
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>行内式</title>
  7. </head>
  8. <body>
  9.     <p style="color: aqua; font-size: 30px; background-color: blanchedalmond;" >This is yellowgreen.</p>
  10. </body>
  11. </html>

CSS常见三种引入方式的特点区别有哪些？

引入方式书写位置作用范围使用场景
内嵌式CSS写在style标签中当前页面小案例
外联式CSS写在单独的css文件中，通过link标签引入多个页面项目中
行内式CSS写在标签的style属性中当前标签配合js使用

 基础选择器：


1.标签选择器结构：

标签名{ css 属性名：属性值；}

作用：通过标签名，找到页面中所有这类的标签，设置样式

注意点：

1.标签选择器选择的是一类标签，而不是单独某一个

2.标签选择器无论嵌套关系有多深，都能找到对应的标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.     /* 选择器{} */
  9.     /* 标签选择器就是以标签名命名的选择器 */
  10.     /* 标签选择器选中的所有的这个标签都生效 */
  11.         p{
  12.             color: chocolate;
  13.             background-color: bisque;
  14.             font-size: 30px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <p>这是一个p标签</p>
  20.     <p>这也是一个p标签</p>
  21. </body>
  22. </html>
2.类选择器

结构：.类名{ css属性名：属性值；}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

2.类名可以由数字 字母 下划线 中划线组成，但是不能以数字或者中划线开头

3.一个标签可以同时有多个类名，类名之间以空格隔开

4.类名可以重复，一个类选择器可以同时选中多个标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>类选择器</title>
  7.     <style>
  8.         .color{
  9.             color: lightcoral;
  10.             
  11.         }
  12.         .size{
  13.             font-size: 20px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <p class="color size">这是一个p标签</p>
  19.     <div class="color">这是一个div标签</div>
  20. </body>
  21. </html>
3.id选择器

结构：#id属性值{ css属性名：属性值；}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

1.所有标签上都有id属性

2.id属性值类似于身份证号，在一个页面 中是唯一的，不可重复

3.一个标签上只能有一个id属性值

4.一个id选择器只能选择一个标签

4.通配符选择器

结构：*{css 属性名：属性值；}

作用：找到页面中所有的标签，设置样式

注意点：

1.开发中使用极少，只会在极特殊情况下才会用到

2.在小页面中可能会用于去除标签默认的margin和padding

字体和文本样式

1.字体大小

属性名：font-size

取值：数字+px

注意点：

谷歌浏览器默认文字大小是16px

单位需要设置，否则无效

2.字体粗细

属性名：font-weignt

关键字:

正常normal
加粗bold

纯数字：

正常400
加粗700

注意点：

不是所有字体都提供了九种粗细，因此部分取值页面中无变化

实际开发中：正常加粗两种取值使用最多

3.字体样式（是否倾斜）

属性名：font-style

取值：

正常（默认）：normal

倾斜：italic

字体系列 font-family

样式的层叠问题

如果给同一个标签设置了相同的样式，此时样式会层叠（覆盖），写在最下面的会生效

字体font相关属性的连写

属性名：font（复合属性）

取值：font：style weight size family；

省略要求：只能省略前两个，如果省略了相当于

设置了默认值

注意点：如果需要同时设置单独和连写形式

要么把单独的样式写在连写的下面

要么把单独的样式写在连写的里面

文本缩进

属性名：text-indent

取值：

*数字+px

*数字+em（推荐：1em=当前标签的font-size的大小）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         p{
  9.             text-indent: 2em;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <p>神舟十七号航天员汤洪波、唐胜杰、江新林密切协同，在空间站机械臂和地面科研人员的配合支持下，完成全部既定任务，航天员汤洪波、江新林安全返回问天实验舱，出舱活动取得圆满成功</p>
  15. </body>
  16. </html>
文本水平对齐方式

属性名：text-align

取值：

属性值效果
left左对齐
center居中对齐
right右对齐

注意点：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         h1{
  9.             text-align: center;
  10.         }
  11.         p{
  12.             text-align: right;
  13.         }
  14.         div{
  15.             text-align: left;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <h1>新闻标题</h1>
  21.     <p>这是一个p标签</p>
  22.     <div>这是一个div标签</div>
  23. </body>
  24. </html>
文本修饰

属性名：text-decoration

取值：

属性值效果
underline下划线（常用）
line-through删除线（不常用）
overline上划线
none无装饰线（常用）

注意点：开发中会使用text-decoration：none；清除a标签默认的下划线

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         p{
  9.             text-decoration: underline;
  10.         }
  11.         div{
  12.             text-decoration: line-through;
  13.         }
  14.         h2{
  15.             text-decoration: overline;
  16.         }
  17.         a{
  18.             text-decoration: none;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <p>ppppp</p>
  24.     <div>divdivdiv</div>
  25.     <h2>h2h2h2</h2>
  26.     <a href="">我是超链接 点点看
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/202272
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。