css第一部分学习


1 - 1. css规则由两个主要的部分构成:选择器以及一条或多条声明,
选择器就是根据不同需求把不同的标签选出来这就是选择器的作用
1 - 2 . 选择器分为基础选择器和复合选择器

基础选择器分为四个,标签选择器类选择器idx选择器通配符选择器

2-1 标签选择器

    <style>
        /* 选择器选择的东西都会全选出来的  */
        
        p {
            color: green
        }
        
        div {
            color: pink;
        }
    </style>
</head>

<body>
    <P>男生</P>
    <P>男生</P>
    <P>男生</P>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>

2-2 类选择器

    <style>
        /* 类选择器口诀: 样式点定义  结构累(class)调用 一个或多个 开发最常用 */
        
        .red {
            color: red;
        }
        
        .xue {
            color: green;
        }
        
        .xi {
            color: pink;
        }
    </style>
</head>

<body>
    <Ul>
        <li class="red">冰雨</li>
        <li class="red">来生缘</li>
        <li class="xi">李上</li>
        <li class="xi">冯贺阳</li>
        <li class="xue">吉吉国王</li>
    </Ul>
</body>

2-3 id选择器

  <style>
        /* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
        
        #pink {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="pink">毛毛小帅哥</div>
    <div id="pind">毛毛小哥帅</div>
</body>

2-4 通配符选择器

    <style>
        * {
            color: red;
        }
        /* * 这里把 html  body div span li 等等的标签都改为了红色 */
    </style>
</head>

<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>

三 css字体属性
主要关于四方面 , 4-font-family:系列 ,3-font-size:大小 , 2-font-weight:字体粗细 ,1-font-style:字体样式。
3-1 字体系列

    <style>
        h2 {
            font-family: "微软雅黑";
        }
        
        p {
            font-family: " 微软雅黑";
        }
    </style>
</head>

<body>
    <h2>myself的秘密</h2>
    <p>我用双手成就你的梦想。</p>
    <p>死亡如风,相伴永远。</p>
    <p>胜利女神在微笑。</p>
    <p>死亡亦如黎明中的花朵。</p>
    <p>汉水有女神,可是追不上。</p>
    <p>窈窕淑女,君子好逑。</p>
</body>

3-2 ,字体大小

   <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊,需要单独指定文字大小 */
        
        h2 {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <h2>myself的秘密</h2>
    <p>我用双手成就你的梦想。</p>
    <p>死亡如风,相伴永远。</p>
    <p>胜利女神在微笑。</p>
    <p>死亡亦如黎明中的花朵。</p>
    <p>汉水有女神,可是追不上。</p>
    <p>窈窕淑女,君子好逑。</p>
</body>

3-3 ,字体粗细

   <style>
        .bold {
            /* font-weight: bold; */
            /* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 */
            /* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
            font-weight: 700;
        }
        
        h2 {
            /* font-weight: normal;  */
            font-weight: 400;
        }
    </style>
</head>

<body>
    <h2>myself的秘密</h2>
    <p>我用双手成就你的梦想。</p>
    <p>死亡如风,相伴永远。</p>
    <p>胜利女神在微笑。</p>
    <p>死亡亦如黎明中的花朵。</p>
    <p class="bold">汉水有女神,可是追不上。</p>
    <p>窈窕淑女,君子好逑。</p>
</body>

3-4 ,字体样式

    <style>
        p {
            font-style: italic;
        }
        
        em {
            font-style: normal;
        }
    </style>

</head>

<body>
    <p>同学,上课时候的你</p>
    <em>下课时候的你</em>
</body>

3-5复合属性
加粗样式

   <style>
        /* 想要div 文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
        
        div {
            /*  font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 微软雅黑; */
            /* 复合属性:简写的方式 */
            /*  font: font-style font-weight font-size/line-height   font-family; */
            /*  font: italic 700 16px 微软雅黑; */
            font: 20px "黑体";
        }
    </style>
</head>

<body>
    <div>三生三世十里桃花,一心一意百行代码。</div>
</body>

四css文本属性可定义的外观,比如颜色,对齐文本,装饰文本,文本缩进,行间距
4-1 颜色

    <style>
        div {
            /* color: deeppink; */
            /* color: #cc00ff; */
            color: rgb(200, 0, 0);
        }
    </style>
</head>

<body>
    <div>有故事的人一般都很有意思啊.小姐姐们。</div>
</body>

4-2 对齐文本

  <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            /* text-align: center; */
            text-align: right;
        }
    </style>
</head>

<body>
    <h1>居中对齐的标题</h1>
</body>

4-3装饰文本

  <style>
        div {
            /*  下划线  */
            /*text-decoration: underline;  */
            /* 删除线  */
            text-decoration: line-through;
            /* 上划线 */
            /* text-decoration: overline; */
        }
    </style>
</head>

<body>
    <div>青春的点点滴滴</div>
</body>

4-4文本缩进

  <style>
        p {
            font-size: 24px;
            /*  文本的第一行首行缩进 多少距离  */
            /* text-indent: 20px;  */
            /* 如果此时写了2em 则是缩进当前元素2个文字大小的距离  */
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p>如果光已忘了将前方照亮,她会跟着我一起走吗,如果路会通往不知名的地方,一生好长,一瞬太短,夜里忽然醒来又选择遗忘,幸好啊,你的光又落在我身旁</p>
    <p>茫然走在海边,看那潮来潮去,突然想把每朵浪花拍尽.如果大海能够带走曾经的爱,就让我用深情等待,如果深情往事你也不再留恋,就让她随风飘远。</p>
    <p>十九岁的那一天,我来到黄淮的面前,</p>
</body>

4-5行间距

   <style>
        div {
            line-height: 26px;
        }
        
        p {
            line-height: 25px;
        }
    </style>
</head>

<body>
    <div>中国人</div>
    <p>如果光已忘了将前方照亮,她会跟着我一起走吗,如果路会通往不知名的地方,一生好长,一瞬太短,夜里忽然醒来又选择遗忘,幸好啊,你的光又落在我身旁</p>
    <p>茫然走在海边,看那潮来潮去,突然想把每朵浪花拍尽.如果大海能够带走曾经的爱,就让我用深情等待,如果深情往事你也不再留恋,就让她随风飘远。</p>
    <p>十九岁的那一天,我来到黄淮的面前,</p>
</body>


在这里插入图片描述

感想:css是一个美术师,她就像一个母亲一样呵护html这个小孩子。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值