当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

HTML基础学习第五天

2020-04-06 00:33前端开发基础 人已围观文章来源:成都SEO文章作者:小成站长

简介CSS 用法:美化页面 CSS语法规范 用法 p { font-size:12px; color:red; } CSS 代码风格 紧凑型 h3 { font-size: 12px; color: red;} 展开格...

CSS
 
用法:美化页面
 
CSS语法规范
 
用法
 
p {
font-size:12px;
color:red;
}
 
CSS 代码风格
 
紧凑型
h3 { font-size: 12px; color: red;}
 
展开格式
 
h3 {
font-size: 12px; 
color: red;
}
 
代码规范;
 
空格规范
1. 选择器后面保留空格
2.属性冒号后保留空格
3.展开式代码规范
 
1.CSS基础选择器
 
CSS选择两件事
 
1.选对人(标签)
2.选对事(样式)
 
 
2.2选择器分类
 
基础选择器
 
 
 
--------------------------
1.标签选择器
语法 
 
标签 {
属性: 值;
 
}
 
作用:选择统一的标签进行更改样式 
 
优点:设置标签统一格式
 
缺点:不能单独更改
-----------------------
2.类选择器
语法
.类名 {
属性: 值;
 
作用:单独选择某一个,或几个
 
样式 .定义
 
多类选择器
作用:抽离公共用的代码 用统一的类样式名称调用
 
列子: 设置同一个盒子大小
 
.box {
width:300px;
height:300px;
}
 
<div class="box red">红色</div>
<div class="box yellow">黄色</div>
<div class="box green">绿色</div>
 
----------------------------------------
id选择器
 
#id名 {
 
 
 
<div id="red">红色</div>
<div id="red">黄色</div>
<div id="red">绿色</div>
 
id选择器口诀: 样式#定义, 结构id调用。 只能调用一次  不能重复调用
 
类选择器和id选择器区别
 
类选择器:一个或者多个 区别:使用多次
ID选择器:一个 区别:唯一一次
 
-----------------------------------
通配符选择器
* 所有标签
 
* {
属性: 值;
}
 
html p div 
 
CSS字体属性
 
 
1.字体属性
 
font-family
 
2.字体大小
font-size: 12px;
 
3字体粗细
font-weight:normal;
font-weight:400;默认
font-weight:700;加粗
 
 
文字样式:
font-style:normal 默认
font-style:italic 倾斜
 
使用场景: 让斜体字体变得不倾斜
 
 字体复合属性
body {
font: font-style font-weight font-size/line-height font-family;
font:italic 700 16px 'Microsoft yahei';
font:16px 'Microsoft yahei';
}
注意: 必须有顺序有字体大小和字体属性;
 
CSS文本属性
 
div {
color: red;
}
 
装饰文本: 加下划线
 
text-decoration:none 默认
text-decoration:underline 下划线
ltext-decoration:line-through 删除线
text-decoration:overline 上划线
-------------------------------------
文本缩进:
 
用法:文本的第一行首行缩进
text-indent: 20px;
 
em 当前文字大小 1em=1个文字大小
 
------------------------------------------
行间距
line-height: 20px;
不能改变文字大小  改变是文字上部和底部的距离
 
复合选择器
 
 
-----------------------------效果-----------------------------

男生

男生

男生

女生
女生
女生
 
 
-------------------------------源码---------------------------------------------
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01.标签选择器</title>
    <style>
    /* 标签选择器:写上标签名 */
     p {
         color: green;
     }
     div {
         color: pink;
     }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>
----------------------效果------------------------------------------
  • 春天的故事
  • 冬天的故事
  • 秋天的故事
  • 童话的故事
  • 成年的故事
 
 
------------------------源码-----------------------------
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .red {
        color: red;
    }
    
    </style>
</head>
<body>
    <ul>
        <li clss="red">春天的故事</li>
        <li clss="red">冬天的故事</li>
        <li>秋天的故事</li>
        <li>童话的故事</li>
        <li>成年的故事</li>
    </ul>
</body>
</html>
------------------------------效果---------------------------------------------------------

沁园春·长沙

【毛泽东】

独立寒秋, 湘江北去,橘子洲头。

看万山红遍,层林尽染, 漫江碧透,百舸争流。


鹰击长空,鱼翔浅底,万类霜天竞自由。

怅寥廓,问苍茫大地,谁主沉浮?携来百侣曾游,忆往昔峥嵘岁月稠。

恰同学少年,风华正茂;书生意气,挥斥方遒。

指点江山,激扬文字,粪土当年万户侯。

曾记否,到中流击水,浪遏 飞舟?

 
 
--------------------------源码----------------------------------
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03.诗句</title>
    <style>
        body {
            font:16px 'Microsoft yahei';
            font-weight: 700;
        }
    .jiacu {
        font-size: 22px;
    }
    .bianda {
        font-size: 18px;
    }
    </style>
</head>
<body>
    <h1>沁园春·长沙</h1>
 
【毛泽东】
 
<p><span class="jiacu">独立寒秋,</span> 湘江北去,<span class="jiacu">橘子洲头。</span></p>
 
<p><span class="jiacu">看万山红遍,</span><span class="jiacu">层林尽染</span>, 漫江碧透,<span class="jiacu">百舸争流。</span></p><br>
 
<p><span class="bianda">鹰击长空,</span>鱼翔浅底,<span class="bianda">万类霜天竞自由。</span></p>
 
<p><span class="bianda">怅寥廓,</span>问苍茫大地,谁主沉浮?<span class="bianda">携来百侣曾游,忆往昔峥嵘岁月稠。</span></p>
 
<p>恰同学少年,风华正茂;书生意气,挥斥方遒。</p>
 
<p><span class="bianda">指点江山,激扬文字,粪土当年万户侯。</span></p>
 
<p>曾记否,到中流击水,浪遏 飞舟?</p>
</body>
</html>
 
---------------------------------
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计96篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们