【Web前端】2.0 CSS(一)——选择器、字体和外观属性

1.0 行内样式代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>世纪佳缘-你在我也在</title>
    <style>
        tr {
            height: 40px;
        }   
    </style>
</head>
<body>
    <table width="600" align="center">
        <caption> <h4 style="color: pink;"> 青春不常在,抓紧谈恋爱 </h4></caption>
        <!-- 1 -->
        <tr>
            <td>性别</td>
            <td>
                <input type="radio"  name="sex"  checked="checked" /><img src="images/man.jpg" /> 男
                <input type="radio"  name="sex" /><img src="images/women.jpg" /> 女
            </td>
        </tr>
        <!-- 2 -->
        <tr>
            <td>生日</td>
            <td>
                <!-- 年份的 -->
                <select>
                    <option>--请选择年--</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                </select>
                <!-- 月份的 -->
                <select>
                    <option>--请选择月--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <!-- 日子 -->
                <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </td>
        </tr>
        <!-- 3 -->
        <tr>
            <td>所在地区</td>
            <td>
                <input  type="text" value="北京思密达" style="color: gray;" />
            </td>
        </tr>
        <!-- 4行 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" checked="checked"/> 未婚
                <input type="radio" name="marry" /> 已婚
                <input type="radio" name="marry" /> 离婚
            </td>
        </tr>
        <!-- 5行 -->
        <tr>
            <td>学历</td>
            <td>
                <input type="text" value="幼儿园">
            </td>
        </tr>
        <!-- 6行 -->
        <tr>
            <td>月薪</td>
            <td>
                <input type="text" value="10000-20000">
            </td>
        </tr>
        <!-- 7行 -->
        <tr>
            <td>手机号码</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <!-- 8行 -->
        <tr>
            <td>昵称</td>
            <td>
                <input type="text" >
            </td>
        </tr>
        <!-- 9行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="love" /> 妩媚的
                <input type="checkbox" name="love" /> 可爱的
                <input type="checkbox" name="love" /> 小鲜肉
                <input type="checkbox" name="love" /> 老腊肉
                <input type="checkbox" name="love" /> 都喜欢
            </td>
        </tr>
        <!-- 10 行 -->
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea> 自我介绍 </textarea>
            </td>
        </tr>
        <!-- 11行 -->
        <tr>
            <td></td>
            <td>
                <input type="image" src="images/btn.png" />
            </td>
        </tr>
        <!-- 12 行 -->
        <tr>
            <td></td>
            <td> <input type="checkbox" name="agree" checked="checked" />我同意注册条款和会员加入标准</td>
        </tr>
        <!-- 13行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员,立即登录</a>
            </td>
        </tr>
        <!-- 14 -->
        <tr>
            <td></td>
            <td>
                <h3>我承诺</h3>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

执行:


image.png
2.0 内嵌式css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h2 {
            color: green;
            font-size: 20px;
        }
        h4 {
            color: purple;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>

<h2>忆江南 唐.白居易</h2>
<p>
  江南好,风景旧曾谙。<br />
  日出江花红胜火,<br />
  春来江水绿如蓝,<br />
  能不忆江南。</p>

<h4>作者介绍</h4>
<p>白居易(772-846) ,字乐天,白居易(772-846) ,字乐天,
太原(今属山西)人。唐德宗朝进士,元和三年(808)拜左拾遗,后贬江州(今属江西)司马,移忠州(今属四川)刺史,又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳,自号醉吟先生、香山居士。其诗政治倾向鲜明,重讽喻,尚坦易,为中唐大家。也是早期词人中的佼佼者,所作对后世影响甚大。
</p>

<h4>注释</h4>
<p>(1)据《乐府杂录》,此词又名《谢秋娘》,系唐李德裕为亡姬谢秋娘作。又名《望江南》、
《梦江南》等。分单调、双调两体。单调二十七字,双凋五十四字,皆平韵。(2)谙(音安):熟悉。(3)蓝:蓝草,其叶可制青绿染料。</p>

<h4>品评</h4>
<p>此词写江南春色,首句“江南好”,以一个既浅切又圆活的“好”字,摄尽江南春色的种种佳处,而作者的赞颂之意与向往之情也尽寓其中。同时,唯因“好”之已甚,方能“忆”之不休,因此,此句又已暗逗结句“能不忆江南”,并与之相关阖。次句“风景旧曾谙”,点明江南风景之“好”,并非得之传闻,而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字,又照应了“忆”字,不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进  行形象化的演绎,突出渲染江花、江水红绿相映的明艳色彩,给人以光彩夺目的强烈印象。其中,既有同色间的相互烘托,又有异色间的相互映衬,充分显示了作者善于著色的技巧。篇末,以“能不忆江南”收束全词,既托出身在洛阳的作者对江南春色的无限赞叹与怀念,又造成一种悠远而又深长的韵味,把读者带入余情摇漾的境界中。</p>

</body>
</html>

执行:


image.png
3.0 外部样式表(外链式)

同级目录下的html页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 这句话就是给html文件 和 css 文件 建立一种联系 -->
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h3>来呀!快活呀~ 反正有大把时间</h3>
</body>
</html>

CSS

h3 {
    color: deeppink;
    font-size: 20px;  
}

执行:


image.png
4.0 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            color: red;
        }
        span {
            color: green;
        }
        
    </style>
</head>
<body>
   标签选择器口诀:
    <div>标签选择器,</div>
    <div>页面同选起。</div>
    <div>直接写标签,</div>
    <div>全部不放弃。</div>
    <span>标签选择器,</span>
    <span>页面同选起。</span>
    <span>直接写标签,</span>
    <span>全部不放弃</span>
</body>
</html>

执行:


image.png
5.0 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
   类选择器口诀:
    <div>差异化选择,</div>
    <div class="red">一个或多个。</div>
    <div>上面点定义,</div>
    <div>类名别写错。</div>
    <div>谁用谁调用,</div>
    <div>class来做。</div>
    <div class="red">嘿嘿,工作类最多。</div>
</body>
</html>

执行:


image.png
6.0 google案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Google案例</title>
    <style type="text/css">
        .blue {
            font-size: 100px;
            color: blue;
        }
        .red {
            font-size: 100px;
            color: red;
        }
        .orange {
            font-size: 100px;
            color: orange;
        }
        .green {
            font-size: 100px;
            color: green;
        }
    </style>
</head>
<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>
</html>

执行:


image.png
7.0 多类名
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Google案例</title>
    <style type="text/css">
        .font100 {
            font-size: 100px;
        }
        
        .blue {
            color: blue;
        }
        
        .red {
            color: red;
        }
        
        .orange {
            color: orange;
        }
        
        .green {
            color: green;
        }
    </style>
</head>

<body>
    <!-- 在一个标签内部只能有一个class -->
    <span class="blue font100">G</span>
    <span class="red font100">o</span>
    <span class="orange font100">o</span>
    <span class="blue font100">g</span>
    <span class="green font100">l</span>
    <span class="red font100">e</span>
</body>

</html>

执行:


image.png
8.0 Unicode字体

为了解决,在不同浏览器上中文乱码的问题,采取Unicode字体代替。

  • 为什么使用 Unicode字体

    • 在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。
    • xp 系统不支持 类似微软雅黑的中文。
  • 解决:

    • 方案一: 你可以使用英文来替代。 比如font-family:"Microsoft Yahei"

    • 方案二: 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。

    font-family: "\5FAE\8F6F\96C5\9ED1";   表示设置字体为“微软雅黑”。
字体名称 英文名称 Unicode 编码
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
隶书 LiSu \96B6\4E66
幼园 YouYuan \5E7C\5706
华文细黑 STXihei \534E\6587\7EC6\9ED1
细明体 MingLiU \7EC6\660E\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53

为了照顾不同电脑的字体安装问题,我们尽量只使用宋体和微软雅黑中文字体

9.0 font-weight:字体粗细
  • 在html中如何将字体加粗我们可以用标签来实现
    • 使用 b 和 strong 标签是文本加粗。
  • 可以使用CSS 来实现,但是CSS 是没有语义的。
属性值 描述
normal 默认值(不加粗的)
bold 定义粗体(加粗的)
100~900 400 等同于 normal,而 700 等同于 bold 我们重点记住这句话

提倡:

我们平时更喜欢用数字来表示加粗和不加粗。

10.0 font-style:字体风格
  • 在html中如何将字体倾斜我们可以用标签来实现
    • 字体倾斜除了用 i 和 em 标签,
  • 可以使用CSS 来实现,但是CSS 是没有语义的

font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

属性 作用
normal 默认值,浏览器会显示标准的字体样式 font-style: normal;
italic 浏览器会显示斜体的字体样式。
<img src="media/good.png" />

小技巧:

平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。
案例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        
        .title {
            /* 字体大小 */
            font-size: 20px;
            /*设置字体      */
            font-family: Arial, "Microsoft YaHei", "微软雅黑", "黑体";
            /*字体加粗  */
            /*font-weight: bold; */
            /*这个 700 一定不要跟单位  700 等价于 bold*/
            font-weight: 700;
            /*字体倾斜*/
            font-style: italic;
        }
        
        h1 {
            /*让粗体的不加粗*/
            /*font-weight: normal;  400 等价于 normal*/
            font-weight: 400;
        }
        
        em {
            /* 让倾斜的字体 不倾斜 */
            font-style: normal;
        }
    </style>
</head>

<body>
    <p class="title">粉红色的回忆</p>
    <p>夏天夏天悄悄过去留下小秘密</p>
    <p>压心底 压心底 不能告诉你</p>
    <p>晚风春过温暖我心底 我又想起你</p>
    <p>多甜蜜 多甜蜜 怎能忘记</p>
    <h1> 韩宝仪 </h1>
    <em>韩宝仪音乐专辑</em>
</body>

</html>

执行:


image.png

综合写法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        .title {
            /* font: font-style  font-weight  font-size/line-height  font-family;*/
            /*综合性写法*/
            font: italic 700 20px "微软雅黑";
        }
        h1 {
            /*让粗体的不加粗*/
            /*font-weight: normal;  400 等价于 normal*/
            font-weight: 400;
        }
        em {
            /* 让倾斜的字体 不倾斜 */
            font-style: normal;
        }
    </style>
</head>
<body>
    <p class="title">粉红色的回忆</p>
    <p>夏天夏天悄悄过去留下小秘密</p>
    <p>压心底 压心底 不能告诉你</p>
    <p>晚风春过温暖我心底 我又想起你</p>
    <p>多甜蜜 多甜蜜 怎能忘记</p>
    <h1> 韩宝仪 </h1>
    <em>韩宝仪音乐专辑</em>
</body>
</html>

执行:


image.png
11. CSS外观属性
11.1 color:文本颜色
  • 作用:

    color属性用于定义文本的颜色,

  • 其取值方式有如下3种:

表示表示 属性值
预定义的颜色值 red,green,blue,还有我们的御用色 pink
十六进制 #FF0000,#FF6600,#29D794
RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)
  • 注意

    我们实际工作中, 用 16进制的写法是最多的,而且我们更喜欢简写方式比如 #f00 代表红色

11.2 text-align:文本水平对齐方式
  • 作用:

    text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性

  • 其可用属性值如下:

属性 解释
left 左对齐(默认值)
right 右对齐
center 居中对齐
  • 注意:

    是让盒子里面的内容水平居中, 而不是让盒子居中对齐

11.3 line-height:行间距
  • 作用:

    line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。

  • 单位:

    • line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px
  • 技巧:

一般情况下,行距比字号大7.8像素左右就可以了。
line-height: 24px;
11.4 text-indent:首行缩进
  • 作用:

    text-indent属性用于设置首行文本的缩进,

  • 属性值

    • 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值,
    • 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }
11.5 text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

描述
none 默认。定义标准的文本。 取消下划线(最常用)
underline 定义文本下的一条线。下划线 也是我们链接自带的(常用)
overline 定义文本上的一条线。(不用)
line-through 定义穿过文本下的一条线。(不常用)
12.0 CSS外观属性总结
属性 表示 注意点
color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff
line-height 行高 控制行与行之间的距离
text-align 水平对齐 可以设定文字水平的对齐方式
text-indent 首行缩进 通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration 文本修饰 记住 添加 下划线 underline 取消下划线 none

综合案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合案例-体育页面</title>
    <style>
        body {
            font-size: 16px;
        }
        .title {
            font-size: 28px;
            /*让字体不加粗*/
            font-weight: 400;
            /*color: #FF6700;*/
            /*color: rgb(255,103,0);*/
        }

        em {
            /*让倾斜的标签 不倾斜*/
            font-style: normal;
            color: skyblue;
        }
        .time {
            color: #ccc;
            /*#ff0000   #f00
            #000000   #000
            #ffffff   #fff  
            #ff1234 
            #ff1122   #f12*/
        }
        .people {
            /*color: #990000;*/
            color: #900;
            text-decoration: underline;
        }
        .search {
            color: red;
        }
        .btn {
            color: green;
            font-weight: 700;
        }
        /*文本 水平居中对齐*/
        .tac { 
            text-align: center;
        }
        
        p {
            /*行高 */
            line-height: 26px;
            /*首行缩进2个字的距离 em 是倍数关系,  1em 就是1个字的距离 2em 就是2个字的宽度*/
            text-indent: 2em;
        }
        a {
             /*取消下划线  a 默认自带下划线的*/
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1 class="title tac">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>

<div class="tac">  
     <span class="time">2017年07月16日20:11</span> 
     <span class="people"> 新浪体育 评论中大奖 (11人参与)</span> 
     <a href="#">收藏本文</a>
     <input type="text" value="请输入查询条件" class="search" />
     <input type="button" value="搜索" class="btn" />
</div>
<hr />
<p>
    新浪体育讯 7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛,丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午,丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈,并且收拾行囊准备离开。在这样的情况下,丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
</p>

<p>
    在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会,当时俱乐部给出的解释是李虎由于身体欠佳,去医院接受治疗。然而今日李虎出现在俱乐部时,向记者否认了这一说法,并且坦言已经向俱乐部提出了辞呈。
</p>

<p>
    据记者多方了解的情况,李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力,在联赛间歇期期间,教练组曾向俱乐部提出能够多引进有实力的球员补强球队,然而由于和俱乐部在投入以及成绩指标上的分歧,李虎最终和教练组一起在比赛日辞职。
</p>

<p>
    这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员,在比赛中丽江队在主场拼的非常凶,在暴雨之中仍然发挥出了体能充沛的优势,最终凭借点球击败了中超球队哈尔滨毅腾,顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程,丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong>
</p>
</body>
</html>

执行:


图片.png

END

推荐阅读更多精彩内容