乐趣区

关于css:CSS基本知识1

作者：

jiezi

在

为什么呈现CSS?

  • HTML满足不了设计者的需要
  • HTML操作属性不不便
  • HTML外面增加款式带来的是臃肿和繁琐

CSS

CSS：层叠样式表 设置网页外观的款式

css的书写形式

行内样式表

通过style的属性值来设置元素的款式

<标签名 style="属性1:属性值1; 属性2:属性值2;">内容</标签名>

注意事项

1. style便是元素的属性
2. 属性与属性值之间用:相隔
3. 多组属性值之间用;相隔
4. 没有实现元素款式和构造相拆散

代码案例

  <h2 style="font-family: '楷体'; color: blue;  ">二级题目</h2>

内联样式表

将CSS代码写在<head></head>之间  并用style标签定义

<head>
    <style>
        选择器 {
            属性1：属性值1;
            属性2：属性值2;
            属性3：属性值3;
            }
    <style>
<head>

注意事项

  • type=”text/css”能够省略
  • 只能管制以后页面
  • 没有彻底实现款式和构造相拆散

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            h2 {
                color:red;
                font-family: 楷体;
            }
            
        </style>
    </head>

内部样式表

将样式表放入一个或多个以.css扩展名的文件中 ，用link标签将样式表引入html文件中

    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="./stylesheet.css">
    </head>

CSS样式表总结

选择器

作用：找到特定的页面HTML元素

标签选择器

长处: 可能疾速为某一类元素设置款式

毛病： 不能设计差异化款式。

    选择器 {属性1:属性值1; 属性2:属性值2;  属性3:属性值3;}


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                color: blue;
                font-family: "楷体";
                font-size: 20px;
            }

            span {
                color: green;
                font-family: "宋体";
            }
        </style>
    </head>
    <body>
        <div>宰割 分区</div>
        <div>宰割 分区</div>
        <div>宰割 分区</div>
        <div>宰割 分区</div>

        <span>跨度 跨距</span>
        <span>跨度 跨距</span>
        <span>跨度 跨距</span>
        <span>跨度 跨距</span>
    </body>
</html>

类选择器

可为一个或某几个元素设置雷同的款式 类名用英语示意，见命之意。


.类名 {
    属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3;
    属性4:属性值4;
    
}

标签

<标签  class="类名" >内容</标签>

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .c-red {
                color: red;
            }
        </style>
    </head>
    <body>
        <h2>二级题目</h2>
        <h2 class="c-red">二级题目</h2>
        <h2>二级题目</h2>
        <h2>二级题目</h2>
    </body>
</html>

谷歌案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            span {
                font-size: 100px;
            }
                
            .c-red {
                color:red;
            }
            .c-blue {
                 color:blue;
            }
            .c-yellow {
                color:yellow;
            }
                
            .c-green {
                color:green;
            }
            
        </style>
    </head>
    <body>
            <span class="c-blue">G</span>
            <span class="c-yellow">o</span>
            <span class="c-red">o</span>
            <span class="c-blue">g</span>
            <span class="c-green">l</span>
            <span class="c-red" >e</span>
    </body>
</html>

多类名选择器

标签能够领有多个类名，以达到更好的目标。类名之间用空格相隔开。

款式

<style>
            .c-red {
                color: red;
            }

            .f-family {
                font-family: "楷体";
            }
        </style>

标签

<h2 class="c-red f-family">二级题目</h2>

id选择器

选择器


#id名 { 属性1:属性值1;
        属性2:属性值2;
        属性3:属性值3;
        属性4:属性值4;
    }

标签

<标签 id="id名">内容</标签>

注意事项

  • ID选择器是惟一的，一个标签只能领有一个id名
  • id选择器和类抉择惟一的区别在于应用次数上

款式

  <style>
            #c-red {
                color: #0A9CE8;
            }
        </style>

标签

 <p id="c-red">段落 </p>

通配符选择器

抉择页面中所有的标签设置雷同的款式,倡议轻易应用

    * {
        属性1:属性值1;
        属性2:属性值2;
        属性3:属性值3;
        属性4:属性值4;
    }

款式

    <style>
            * {
                color: #87CEEB;
            }
        </style>

标签

 <body>
        <p>段落</p>
        <div>宰割 分区</div>
        <span>跨度 跨距</span>
        <h2>题目</h2>
</body>

CSS字体

font-size

作用：设置字号

款式

     <style>
            body {
                font-size: 16px;
            }

            .f-fz {
                font-size: 20px;
            
            }
        </style>

标签

 <body>
        <p class="f-fz">尧子陌</p>
         <p>临风笑却世间</p>

    </body>

注意事项

  • 不同浏览器的默认字号都不一样，因而间接给body设置默认字体。

font-family

font-family:设置字体

p { font-family: "agency fb", "microsoft yahei,楷体";

注意事项

  • 能够指定多个字体，字体之间用英文状态下逗号相隔
  • 英文的字体要用””包裹

unicode字体

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            span {
                font-family:"\6977\4F53";
            }
        </style>
    </head>
    <body>
        <span>跨度 跨距</span>
    </body>
</html>

fon-weight

font-weiht：字体粗细

注意事项

  • 能够用HTML实现加粗成果 也能够用css实现 但没有语义

款式

     <style>
            p {
                font-weight: 700;
            }

            h2 {
                font-weight: normal;
            }
        </style>

标签

   <body>
        <p>段落</p>
        <h2>二级题目</h2>
    </body>

font-style

font-style:字体歪斜

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            em {
                font-style: normal;
            }
        </style>
    </head>
    <body>
        <em>让歪斜的字体变得失常</em>
    </body>
</html>

font综合写法

选择器 {font:font-style font-weight font-size/line-height font-family}

注意事项

  • 不能省略font-size font-family两个属性

CSS外观属性

color

款式

    <style>
            h2 {
                color: red;
            }

            h4 {
                color: #008000;
            }

            p {
                color: rgb(255, 255, 0);
            }
        </style>

标签

   <body>
        <p>尧子陌</p>
        <h2>二级题目</h2>
        <h4>四级题目</h4>
    </body>

text-align

text-align:文本程度对齐形式


注意事项

  • 是让盒子的内容程度居中 而不是让盒子程度居中
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            h2 {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2>二级题目</h2>
    </body>
</html>

line-height

line-height:行高

个别状况下  行高比默认字体大7 8像素即可

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
                font-size: 16px;
            }
           p {
                line-height: 24px;
            }
            
        </style>
    </head>
    <body>
        <p>《欲望号街车》改编自驰名剧作家田纳西的同名戏剧。影片讲述了美国北方美女布兰奇被解除家庭教师职务后，来到新奥尔良投奔妹妹的故事。妹妹的丈夫是一个性情粗鲁的波兰移民后嗣，名为斯坦利。布兰奇和斯坦利一见面，就彼此产生讨厌。起初，她结识了斯坦利的敌人米奇，两人产生感情，但斯坦利并不看好这段恋情。当斯坦利发现布兰奇被开革老师职务的起因后，他通知了米奇，以致米奇和布兰奇离别。婚姻的可怜、家庭的破产、亲人的死亡，加上四周的男人都不现实，一系列的喜剧以致布兰奇精神失常，最终导致覆灭的喜剧命运。</p>

        <p>
            片中费雯·丽和马龙·白兰度的表演已成为经典。影片荣获1952年第24届奥斯卡金像奖12项提名，并最终获得最佳女主角、最佳男配角、最佳女配角、最佳艺术领导4项大奖。同时，影片荣获1951年第16届电影节评审团特别奖。男主角马龙·白兰度凭借斯坦利一角声名鹊起。</p>
    </body>
</html>

text-indent

text-indent:首行缩进 个别用em示意 1em等于一个汉字的宽度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
            p {
                text-indent: 2em;
            }
        </style>
    </head>
    <body>
        <p>《欲望号街车》改编自驰名剧作家田纳西的同名戏剧。影片讲述了美国北方美女布兰奇被解除家庭教师职务后，来到新奥尔良投奔妹妹的故事。妹妹的丈夫是一个性情粗鲁的波兰移民后嗣，名为斯坦利。布兰奇和斯坦利一见面，就彼此产生讨厌。起初，她结识了斯坦利的敌人米奇，两人产生感情，但斯坦利并不看好这段恋情。当斯坦利发现布兰奇被开革老师职务的起因后，他通知了米奇，以致米奇和布兰奇离别。婚姻的可怜、家庭的破产、亲人的死亡，加上四周的男人都不现实，一系列的喜剧以致布兰奇精神失常，最终导致覆灭的喜剧命运。</p>
        </p>
    </body>
</html>

text-decoration

text-decoration:文本装璜

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            span {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <span>尧子陌</span>
    </body>
</html>

css外观总结

开发工具

快捷方式

  • f12
  • ctrl+shift+I
  • 右击查看 即可关上

注意事项 /

  • 左侧是构造 右侧是款式

快捷方式

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章