2021-04-03 Web前端之CSS——选择器、字体属性、文本属性、样式表

最新推荐文章于 2024-02-02 14:26:07 发布

小六Noomi

最新推荐文章于 2024-02-02 14:26:07 发布

阅读量159

点赞数

分类专栏： web学习日记文章标签： css css3 html html5 前端

本文链接：https://blog.csdn.net/qq_44837911/article/details/115420484

版权

web学习日记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

视频课程：黑马程序员Pink老师

笔记：
选择器以及一条或多条声明
写在<head><style>之间</style></head>
font-size:文字大小
属性和属性之间以键值对的形式出现

代码风格：
1.样式格式书写 ①紧凑格式 ②展开格式（用这种）
2.样式大小写用小写字母书写
3.空格规范属性值前面，冒号后面保留一个空格选择器和大括号中间保留空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>体验CSS语法规范</title>
    <style>
        /* 选择器 {样式} */
        /* 给谁改样式 { 改什么样式} */
        p {
            color: red;
            /* 修改了文字大小为12像素 */
            font-size: 12px;  
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</

笔记：基础选择器
选择器——选择标签用

标签选择器
标签名{
属性1：属性值；
属性2：属性值；
…
}
可以把某一类标签全选出来，同一设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之标签选择器</title>
    <style>
    /* 标签选择器 : 写上标签名 */
    p {
        color: green;
    }
    div {
        color: pink;
    }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

笔记：类选择器
选择单独的一个或其中几个标签
.类名{
属性1：属性值；
…
}
需要用class属性来调用class类
类名是我们自己起的名字
类名不能使用标签名
长名字可用横线
不能使用纯数字、中文
最好根据类命名规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之类选择器</title>
    <style>
        /* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用*/
      .red {
          color: red;
      }
      .star-sing {
        color: green;
      }
      .memeda {  
         color: pink;
      }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>
        <li class="red">来生缘</li>
        <li>李香兰</li>
        <li class="memeda">生僻字</li>
        <li class="star-sing">江南style</li>
    </ul>
    <div class="red">我也想变红色</div>
</body>
</html>

笔记：多类名
在标签class属性中写多个类名
两个名字之间必须用空格隔开

可以把一些标签元素相同的样式共同放到一个类
这些标签都可以调用这个公共的类，然后再调用自己独有的类
从而节省CSS代码，同一修改也非常方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多类名的使用方式</title>
    <style>
        .red {
            color:  red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
</body>
</html>

笔记：id选择器
样式#定义, 结构id调用, 只能调用一次, 别人切勿使用
#id名 {
属性1：属性值；
…
}

id选择器和类选择器的区别：
类选择器好比人的名字。id选择器好比身份证
最大的不同在使用次数 id一般结合js使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之id选择器</title>
    <style>
        /* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
      #pink {
          color: pink;
      }
    
    </style>
</head>
<body>
    <div id="pink">迈克尔·杰克逊</div>
    <div>pink老师</div>
</body>
</html>

笔记：通配符选择器
表示选取页面中所有元素（标签）
*{
属性1：属性值；
…
}
不需要调用，特殊情况下才使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之通配符选择器</title>
    <style>
     * {
         color: red;
     }
     /* * 这里把 html  body  div  span  li 等等的标签都改为了红色 */
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

笔记：字体系列
font-family:‘英文（推荐）/中文’
在body里，多个字体用逗号隔开，长单词用双引号括起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体系列</title>
    <style>
     h2 {
         font-family: '微软雅黑';
     }
     p {
        /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
        font-family: 'Times New Roman', Times, serif;
     }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

笔记：字体大小
font-size :px
px像素大小，默认文字大小16px，可以给body指定整个网页字体大小
标题标签比较特殊，要单独指定文字大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体大小</title>
    <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊,需要单独指定文字大小 */
        h2 {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

笔记：字体粗细
font-weight:
默认mormal bold加粗 bolder细体 lighter细细体
推荐使用：直接写数字（不加单位！！！） 400等同normal 700等同bold

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体大小</title>
    <style>
       .bold {
           /* font-weight: bold; */
           /* 这个700 的后面不要跟单位  等价于 bold 都是加粗的效果 */
           /* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
           font-weight: 700;    
       }
       h2 {
           font-weight: 400;   
           /* font-weight: normal;    */
       }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p class="bold">拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

笔记：文字样式
font-style:
normal 默认（正常） italic 倾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之文字样式(风格)</title>
    <style>
      p {
          font-style: italic;
      }
      em {
          /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */
          font-style: normal;
      }
    </style>
</head>
<body>
    <p>同学,上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

笔记：复合属性
body {
font:font-style font-weight font-size font-family
}
不能颠倒顺序，用空格隔开
不需要的可以省略，但是size和family不能省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之复合属性</title>
    <style>
       /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
       div {
           /* font-style: italic;
           font-weight: 700;
           font-size: 16px;
           font-family: 'Microsoft yahei'; */
           /* 复合属性: 简写的方式  节约代码 */
           /* font: font-style  font-weight  font-size/line-height  font-family; */
           /* font: italic 700 16px 'Microsoft yahei'; */
           font: 20px '黑体';
       }
    </style>
</head>
<body>
   <div>三生三世十里桃花,一心一意百行代码</div>
</body>
</html>

笔记：文本颜色
color 预定义的颜色值十六进制 rgb

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观属性之颜色</title>
    <style>
       div {
           /* color: deeppink; */
           /* color: #cc00ff; */
           color: rgb(255, 0, 255);
       }
    </style>
</head>
<body>
   <div>听说喜欢pink色的男生,都喜欢男人</div>
</body>
</html>

笔记：文字对齐
text-align：使盒子里的文字水平对齐方式
left 左对齐（默认） center 居中对齐 right 右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之文字对齐</title>
    <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            /* text-align: center; */
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

笔记：装饰文本
text-decoration:
none 默认
underline 下划线
overline 上划线
line-through 删除线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之装饰文本</title>
    <style>
       div {
           /* 下划线 */
           /* text-decoration: underline;   */
         /* 删除线 */
           text-decoration: line-through;
           /* 上划线 */
           text-decoration: overline;

       }
       a {
           /* 取消a默认的下划线 */
           text-decoration: none;
           color: #333;
       }
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <a href="#">粉红色的回忆</a>
</body>
</html>

笔记：文本缩进
text-indent:数值px
只缩进首行，文本第一行，存在负值情况
em相对单位，就是当前元素1个文字大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之文本缩进</title>
    <style>
        p {
            font-size: 24px;
            /* 文本的第一行首行缩进 多少距离  */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
            text-indent: 2em;  
        }
    </style>
</head>
<body>
        <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

       <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
        
       <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

笔记：行间距
line-height:数字px
行间距包括：上间距，文本高度（不变），下间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之行间距</title>
    <style>
       div {
           line-height: 26px;
       }
       p {
           line-height: 25px;
       }
    </style>
</head>
<body>
    <div>中国人</div>
       <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

       <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
        
       <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

笔记：三种样式表
1.内部样式表（嵌入式）
内部样式表，将所有css抽取出来，放在style里，一般放在head中
方便控制整个页面中的元素设置
代码结构清晰，但是并没有实现结构与样式完全分离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内部样式表</title>
    <style>
            div {
                color: pink;
            }
     </style>
</head>
<body>
    <div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>
   
</body>
</html>

笔记：
2.行内样式表权重高
直接在标签内部添加style=""，适用于样式简单的
style其实就是标签的属性
在双引号中间
控制当前的标签设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内样式表</title>
</head>
<body>
        <p>夏天夏天悄悄过去留下小秘密</p>

        <p>压心底压心底不能告诉你</p>
        
        <p> 晚风吹过温暖我心底我又想起你</p>
        
        <p> 多甜蜜多甜蜜怎能忘记</p>
        
        <p>不能忘记你把你写在日记里</p>
        
        <p>不能忘记你心里想的还是你</p>
        
        <p>浪漫的夏季还有浪漫的一个你</p>
        
        <p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
</body>
</html>

笔记：
3.外部样式表
样式单独写道CSS文件中，之后把CSS文件引入HTML文件页面中使用
步骤：
①新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
style.css 只有样式没有标签
②使用<link rel="stylesheet" href="css文件路径名">引入HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>来呀~快活呀,反正有大把时间...</div>
</body>
</html>

chrome调试
左边是HTML 右边是CSS
右边CSS可以查看数据，改变颜色上下左右箭头修改，但不能保存
ctrl+0 重置浏览器原始大小
黄色感叹号，样式书写错误

小六Noomi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2021-04-03 Web前端之CSS——选择器、字体属性、文本属性、样式表

视频课程：黑马程序员Pink老师笔记：选择器以及一条或多条声明写在<head><style>之间</style></head>font-size:文字大小属性和属性之间以键值对的形式出现代码风格：1.样式格式书写 ①紧凑格式 ②展开格式（用这种）2.样式大小写用小写字母书写3.空格规范属性值前面，冒号后面保留一个空格选择器和大括号中间保留空格<!DOCTYPE html><html lang="en.
复制链接

扫一扫