关于css:CSS基本知识1

30次阅读

共计 4661 个字符，预计需要花费 12 分钟才能阅读完成。

为什么呈现 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
  • 右击查看 即可关上

注意事项 /

  • 左侧是构造 右侧是款式

快捷方式

正文完
css
发表至： css
2020-08-02
 0
关于css:一些CSS小技巧
关于css:如何使用Grid中的repeat函数
关于css:openKylin出品-COSCon22-开源操作系统论坛快来看看吧
关于css:给我一个你不用tailwindcss的理由