【Web前端】2.0 CSS（上）——选择器、字体和外观属性

作者: bobokaka | 来源:发表于2020-04-06 11:25 被阅读0次

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

【Web前端】2.0 CSS（上）——选择器、字体和外观属性

2.0 内嵌式css

3.0 外部样式表（外链式）

4.0 标签选择器

5.0 类选择器

6.0 google案例

7.0 多类名

8.0 Unicode字体

9.0 font-weight:字体粗细

10.0 font-style:字体风格

11. CSS外观属性

11.1 color:文本颜色

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

11.3 line-height:行间距

11.4 text-indent:首行缩进

11.5 text-decoration 文本的装饰

12.0 CSS外观属性总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读