CSS核心部分:样式规则

最新推荐文章于 2024-08-10 22:43:21 发布

蒲公英追着我跑

最新推荐文章于 2024-08-10 22:43:21 发布

阅读量73

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/Jiamusiggg/article/details/134745503

版权

CSS核心部分:样式规则

1.文本规则

主要对文字进行修饰的
- 文本大小规则
  - 属性:font-size
  - 属性值:数值+单位
  - 默认字体大小为16px;
  - 最新版本浏览器能设置成小于12px的字体
- 文本的字体
  - 属性:font-family(字体族科)
  - 取值
    - 使用中文字体,不需要带引号
    - 如果使用英文字体,单个英文单词组成的字体,不需要带引号,多个英文单词组成的字体需要带引号;
    - 可以跟多个字体取值;多个字体之间使用逗号隔开;
    - 多个字体设置被称为安全字体;读取的时候,从左向右依次读取;如果第一个字体支持的话则实现效果,如果不支持,依次向后;都不支持则使用默认字体
- 文本加粗
  - 属性:font-weight
  - 取值:两种
    - 数值类型
      - 100-900 整百的数值
      - 100====细体
      - 400====正常字体
      - 700====加粗字体
      - 900====更粗字体(强调性)
    - 关键词类型
      - lighter==细体
      - normal==正常字体
      - blod == 加粗字体
      - border==更粗字体(强调性)
  - 问题1:为什么已经有了b标签还要学习CSS:font-weight:blod
    - 简化页面结构,可以实现任何一个标签都能加粗
    - CSS属性能方便我们只做一些简单的交互效果(划过)
    - 选择器:hover{
      
      color:red;
      
      font-weight:bold
      
      }
  - 问题2:为什么知道有默认文本还要学习font-weight:normal
    - 取消h1-h6,b,strong默认加粗效果;
- 文本的倾斜
  - 属性:font-style
  - 取值
    - italic====倾斜
    - oblique===斜体字(强调性)
    - normal====正常字体
  - 问题1:为什么知道有i标签还要学习font-style:italic 同上
  - 问题2:为什么没有倾斜还要学font-style:normal 同上
- 小型大写
  - 属性:font-variant
  - 取值:small-caps
- 首行缩进
  - 属性text-indent
  - 问题:如何在不隐藏盒子(元素)的情况下,把元素内的文本隐藏掉?
    - text-indent:-999999px;
    - font-size:0px;
- 水平对齐方式
  - 属性:text-align
  - 取值
    - left====左侧对齐
    - right==右侧对齐
    - center==居中对齐
    - justify=两端对齐
  - 能否让最后一行文本/单独只有一行文本的标签内容实现两端对齐
  - 属性:text-align-last:justify

示例

<!-- html部分 -->
<p class="p1">原来:你好呀,欢迎来到怀化学院,我们学校的食堂不好吃 My name is Huang Song</p>
<p class="p2">修饰:你好呀,欢迎来到怀化学院,我们学校的食堂不好吃 My name is Huang Song</p>
<p class="p3">奥特曼</p>
<h1>标题1</h1>
<p class="p4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium rem cum quis, rerum eveniet autem ratione excepturi suscipit harum blanditiis unde eaque nesciunt dignissimos. Architecto autem eligendi impedit ipsum expedita.
     Est consectetur excepturi debitis quasi aspernatur dolores maiores accusamus, doloribus quam ipsam inventore a porro consequuntur. Maiores porro possimus, dolore esse tenetur itaque id quidem saepe hic qui, placeat excepturi.
     Impedit fugiat magnam eligendi fugit consequuntur laboriosam, inventore dolores. Aut officiis consequatur aspernatur ratione numquam dolores beatae libero soluta nihil sequi repellendus hic, neque perspiciatis eos nobis dicta eius exercitationem?
     Sed voluptas reiciendis rerum, exercitationem ut aliquam soluta optio maxime vitae ipsam, at dolores ducimus repellat praesentium illo cumque deleniti! Adipisci, dolores itaque. Non quo nesciunt asperiores, magnam dicta minus.</p>

<!-- css部分 -->
.p2{
    /* 1)文本大小 */
    /* font-size: 16px; */
    /* 2)字体属性 */
    /* font-family: 楷体; */
    /* 3)加粗 */
    /* font-weight: lighter; */
    /* 4)倾斜 */
    /* font-style: oblique; */
    /* 5)小型大写 */
    /* font-variant: small-caps; */
    /* 6)首行缩进 */
    /* text-indent: -999999px; */
    /* font-size: 0px; */
}
.p3:hover{
    color: red;
    font-weight: blod;
    font-style: italic;
}
.p4{
    text-align-last: justify;
}

主要对文本的距离进行修饰的
- 行间距：行与行之间的距离
  - 属性：line-height（行高）
- 间距属性：
  - 词间距:单词与单词之间的距离
    - word-spacing
  - 字符间距：英文与英文，汉字与汉字，标签符好之间的距离
    - letter-spacing
- 实现大小写转换
  - 属性：text-transform
- 文本的修饰线
  - 属性：text-decoration
  - 取值：underline dashed red
    - underline === 下划线线条的位置
    - dashed ====== 虚线(线条的样式)
    - red ====== 颜色
  - text-decoration-line:underline ==位置
    - underline 下划线
    - line-through 中划线
    - overline 上划线
    - none 修饰线
  - text-decoration-style:dashed == 线条的样式
    - dashed 虚线(线段状)
    - dotted 虚线(点状虚线)
    - double 双线条
    - solid 单实线
    - wavy 波浪线

2.背景规则

2.1背景属性

背景颜色
- background-color
  - 颜色单词（color,red,blue…）
    - background-color:red
  - #六位十六进制的颜色值(#112233)
    - 十六进制：0-9 A-F
    - 第一二位 ==== 红色取值
    - 第三四位 ==== 绿色取值
    - 第五六位 ==== 蓝色取值
    - 每相邻的两位取值一致则可以省略（#112233 == #123 /#ccffdd == #cfd）
  - rgb()(rgb(12,22,33))
  - rgba(red,green,blue,alpha)
    - alpha==透明度让前面的颜色变透明 0-1之间的小数;
    - 包括0和1 0透明 1不透明
背景图片
- background-image
  - 取值：url(图片路径)
  - 注意事项：只要插入了背景图，就会产生平铺铺满的效果；重复的效果
  - 如果图片较小，直接显示出来平铺效果；如果图片效果较大，则会显示局部
- 解决平铺
  - 属性:background-repeat
  - 取值
    - repeat==平铺
    - no-repeat==不平铺
    - repeat-x:水平平铺
    - repeat-x:垂直平铺
背景位置
- background-position
- 取值:x y(坐标)
背景图片尺寸大小
- 属性:background-size: x y;
- 注意事项：如果直接使用数值单位的话则会让图片变得失真挤压,变形
- 问题：如何等比例缩放
  - cover:覆盖:等比例放大这个图,然后直到铺满这个盒子为止
  - background-size:cover----图片会有裁剪效果
  - contain:包含,等比例放大这个图,只要有一个边铺满就停止
  - background-size:contain----图片会有留白效果
固定滚动

当浏览器或者是容器发生滚动的时候,容器内的图片不会跟着滚动条一起线上滚动,这种情况必然使用背景的固定
- 属性：background-attachement:fixed(固定)/scroll(滚动)
- 只要添加了背景的固定: 背景图片的参照,不再是图片的左上角,而是浏览器窗口的左上角
- 图片铺满浏览器窗口,铺满之后,需要让图片设置大小;滚动的时候缓慢切换
背景的复合属性
- background:color image() repeat x y/x y attachment
  - 复合属性,后面可以跟一个值也可以跟多个值;多个值使用空格隔开
  - 多个值不分先后顺序
  - /前面的xy代表的是位置position
  - /后面的xy代表的是尺寸size
  - 如果你只需要调整尺寸,不需要调整位置,位置也必须添加0px 0px
  - 如果你只需要位置,不需要尺寸,则尺寸可以不带

3.列表规则

列表项显示类型的属性
- list-style-type
- 取值
  - square
  - circle
  - none
  - disc
列表项显示图片的属性
- list-style-image
- 取值
  - url(图片路径)
复合属性
- list-style:type image position
- 取值可以交换顺序;可以取值为一个值也可以取值为多个值
- 实际开发应用:list-style:none
列表项显示的位置(内外)
- list-style-position
- 取值
  - inside
  - outside
注意事项
- 有一些css的属性,放在父元素上面可以实现,放在子元素上面可以实现,这些属性具有一个特性:继承性

4.边框规则

边框属性：border
- 取值(复合属性)
  - width
  - color
  - style
- 单一属性
  - border-width
  - border-style
  - border-color
- 注意事项：无论你使用的是单一属性还是复合属性直接实现的视线一圈的边框
- 问题:能不能只设置一个方向的边框
  - 属性:border-方向词

5.边距详解

内边距详解
- 内边距（默认文本和边框之间没有任何间距的）
- 属性：padding
  - padding:v1;=====实现四个方向内边距
  - ==padding:v1 v2;=======实现四个方向边距;v1代表上下,v2代表左右
  - padding:v1 v2 v3;=======实现四个方向边距;v1代表上,v2代表左右,v3代表下
  - padding:v1 v2 v3 v4;实现四个方向,v1上,v2右,v3下,v4左;
  - 跟四个字的时候:顺时针的方向进行记忆
- 问题:能不能只设置一个方向的内边距
- 属性：padding-方向词
  - padding-top
  - padding-right
  - padding-left
  - padding-right
外边距详解
- 外边距
- 属性：margin
  - margin:v1;=====实现四个方向外边距
  - margin:v1 v2;=======实现四个方向边距;v1代表上下,v2代表左右
  - margin:v1 v2 v3;=======实现四个方向边距;v1代表上,v2代表左右,v3代表下
  - margin:v1 v2 v3 v4;实现四个方向,v1上,v2右,v3下,v4左;
  - 跟四个字的时候:顺时针的方向进行记忆
- 问题:能不能只设置一个方向的外边距
- 属性：margin-方向词
  - margin-top
  - margin-right
  - margin-left
  - margin-right

综合案例

<!-- html部分 -->
<!-- 梯形风车 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/06.css">
</head>
<body>
    <div class="father_box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
.father_box{
    width: 400px;
    height: 400px;
    /* border: 10px solid gray; */
}
.father_box>div{
    width: 0px;
    height: 0px;
<!-- 横向排列 -->
    float: left;
}
.box1{
    /* border-top: 100px solid orange; */
    border-right: 100px solid orange;
    border-left: 100px solid transparent;
    border-bottom: 100px solid orange;
    margin-top: 100px;
}

.box2{
    border-top: 100px solid transparent;
    /* border-right: 100px solid blue; */
    border-left: 100px solid blue;
    border-bottom: 100px solid blue;
    /* 添加右外边距 */
    margin-right: 1px ;
}
.box3{
    border-top: 100px solid yellow;
    border-right: 100px solid yellow;
    /* border-left: 100px solid yellow; */
    border-bottom: 100px solid transparent;
    /* 添加左外边距 */
    margin-left: 100px;

}
.box4{
    border-top: 100px solid green;
    border-right: 100px solid transparent;
    border-left: 100px solid green;
    /* border-bottom: 100px solid yellow; */
}

实现效果如图
在这里插入图片描述

蒲公英追着我跑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS核心部分:样式规则

当浏览器或者是容器发生滚动的时候,容器内的图片不会跟着滚动条一起线上滚动,这种情况必然使用背景的固定。问题1:为什么已经有了b标签还要学习CSS:font-weight:blod。问题2:为什么知道有默认文本还要学习font-weight:normal。CSS属性能方便我们只做一些简单的交互效果(划过)简化页面结构,可以实现任何一个标签都能加粗。属性:font-weight。主要对文字进行修饰的。选择器:hover{
复制链接

扫一扫