html-css

-molecule.

已于 2022-10-28 16:40:44 修改

阅读量1.1k

点赞数 1

文章标签： css html css3

于 2022-10-28 16:15:57 首次发布

本文链接：https://blog.csdn.net/molecule_9/article/details/127573830

版权

这里写目录标题

二、CSS基本语法

二、CSS基本语法

格式：
选择器{属性1：值1；属性二：值2}
单位：
px->像素（pixel）、%->百分比
基本样式：
width、height、background-color
CSS注释：
/css注释内容/

<!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>
        div{width:100px;height:100px; background-color:red}
    </style>
 </head>
 <body>
    <div>这是一首简单的小情歌</div>
 </body>   
</html>

成果展示：在这里插入图片描述

1.内联样式与内部样式（css样式的引入方式）

内联（行内、行间）样式：
在html标签上添加style属性来实现的

<style>
        div{width:50%；height:50px; background-color:red}
    </style>
 </head>
 <body>
    <div>这是一首简单的小情歌</div>
 </body>

内部样式
在

<div style="width:100px;height:100px;background-color:blueviolet">妹妹说紫色很有韵味</div>
<div style="width:50px;height:50px;background-color:blue">董</div>
<div style="width:50px;height:50px;background-color:red">双</div>
<div style="width:50px;height:50px;background-color:green">玉</div>
<!--另起一个板-->

区别：内部样式的代码可以复用、复合w3c的规范标准，进行让结构和样式分开处理

2.外部样式

引入一个单独的css文件，name，css
link标签：引入外部资源
rel属性：指定资源跟页面的关系（当前文档与被链接的关系）
href属性：资源的地址
@import：通过这种方式引入外部样式（不建议，问题很多）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,inital-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!--<link rel="stylesheet" href="./common.css">-->
        <title>Document</title>
        <style>
            @import url('./common.css');
        </style>
    </head>
<body>
    <div>董双玉头顶的颜色就是这块的背景色
    </div>
</body>
</html>
<!--制作链接：将文件模式改为。css模式-->

成果展示
在这里插入图片描述

3.css中的颜色表示法

1.单词表示法：red、green等
颜色的英文代码：
在这里插入图片描述

2.十六进制表示法：
0 1 2 3 4 5 6 7 8 9 a b c d e f

<!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>
        div{ background-color:#000000}
    </style>
 </head>
 <body>
    <div>这是一首简单的小情歌</div>
 </body>   
</html>

成果展示：
在这里插入图片描述

3.rgb三原色表示法：rgb(255,255,255)
取值范围：0~255
提取颜色的下载地址：https：//www.daidufe.com/fehelper
photoshop

4.背景样式

1.background-color:背景颜色
2.background-image:背景图片
【url背景地址】
默认：会水平垂直都铺满背景图
3.background-repeat:背景图片的平铺方式
repeat-x：x轴平铺
repeat-y：y轴平铺
repeat（x,y都进行平铺，默认值）
no-repeat:都不平铺
4.background-position:背景图片的位置
x y:number （px、%）单词
x:left、center、right
y：top、center、bottom
5.background-attachment:背景图片随滚动条的移动方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed：（背景位置是按照浏览器进行偏移的）

<!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>
        div{ width：3000px；height：3000px； background-color:red; 
            background-image:url(./img/256.jpg);/*图片位置*/
            background-repeat:no-repeat ;
            background-position:right center;  
            background-attachment: scroll   /*fixed*/
        }
    </style>
 </head>
 <body>
    <div></div>
 </body>   
</html>

5.背景实现视觉差

<!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>
        div{width:1400px;height:800px;background-image:url(./img/1.jpg);background-attachment: fixed;}
        div{width:1400px;height:800px;background-image:url(./img/2.jpg);background-attachment: fixed;}
        div{width:1400px;height:800px;background-image:url(./img/3.jpg);background-attachment: fixed;}
    </style>
 </head>
 <body>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div1"></div>
</body>   
</html>

6.边框样式

border-style:边框的样式
solid：实线
dashed：虚线
dotted：点线
在这里插入图片描述

border-width:边框的大小（px…）
border-color:边框的颜色(red，#…)
注：针对某一条边进行单独设置
（圆角边框）
在这里插入图片描述

<!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>
      div{width:300px;height:300px;border-/*right- 上下左右针对某一条边进行设置，放在中间*/style:dashed;border-color:red;
    border-width:10px;}

    </style>
 </head>
 <body>
    <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>
      div{width:300px;height:300px;
        border-top-style:solid;
        border-top-color:green;
        border-top-width:100px;
        border-bottom-style:solid;
        border-bottom-color:red;
        border-bottom-width:100px;
        border-left-style:solid;
        border-left-color:blueviolet;
        border-left-width:100px;
        border-right-style:solid;
        border-right-color:yellow;
        border-right-width:100px;
        
    }

    </style>
 </head>
 <body>
    <div></div>
</body>   
</html>

成果展示：
在这里插入图片描述
三角形：
方法一：（将width与height设置为0，在讲其他方块颜色设置为背景色/不是白色，是与背景图相同的颜色/）
方法二：将每个方块颜色设置为透明色（transparent）

<!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>
      div{width:0px;height:0px;
        border-top-style:solid;
        border-top-color:transparent;
        border-top-width:100px;
        border-bottom-style:solid;
        border-bottom-color:transparent;
        border-bottom-width:100px;
        border-left-style:solid;
        border-left-color:transparent;
        border-left-width:100px;
        border-right-style:solid;
        border-right-color:black;
        border-right-width:100px;
        
    }

    </style>
 </head>
 <body>
    <div></div>
</body>   
</html>

成果展示：
在这里插入图片描述

7.文字样式

1.字体类型：font-family
英文、中文
衬线体与非衬线体：
区别：带衬线有棱角，非衬线体比较圆滑
注：设置多字体的方式
如果设置的字体中有空格要带上单引号
在这里插入图片描述

<!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>
      div{font-family：Microsoft Yahei;}
    </style>
 </head>
 <body>
    <div>心中有党，成绩理想</div>
</body>   
</html>

成果展示：
在这里插入图片描述

2.字体大小：font-size（16px默认像素）
第一种：输入像素数字大小（00px）
第二种：有英文形式：
在这里插入图片描述

<!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>
        div{font-size: 50px;}

    </style>
 </head>
 <body>
    <div>我怀念的是无话不说</div>
 </body>   
</html>

成果展示：
在这里插入图片描述
3.字体粗细：font-weight
模式：正常（normal）、加粗（bold）
写法：单词（normal、bold）/number（100 200…500都是正常的，600…900都是加粗的）/
4.字体样式：font-style
模式：正常（默认）、斜体（italic）
/*oblique也是表示斜体，用的比较少，一般了解即可，没什么差别 */
区别：（1.）italic：带有属性倾斜字体的才可以设置倾斜操作。
（2.）oblique：没有倾斜属性的字体也可以设置倾斜操作

8.css段落样式——文本修饰

text-decoration：文本修饰
下划线:underline
删除线:line-through
上划线:overline

<!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>
      p{width:300px;text-decoration: line-through;/*添加多个修饰中间直接用空格隔开*/}  
    </style>
 </head>
 <body>
    <p>每个优秀的人的心中都有一段沉默的时光，那段时光是付出了很多努力，却得不到结果的日子，我们把它叫做扎根</p>
 </body>   
</html>

成果展示
在这里插入图片描述

9.css段落样式——文本大小写

text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母：capitalize

10. css段落样式——文本缩进

text-indent：文本缩进（一个文字16px——对齐）
首行缩进的效果
em相对单位：相对单位，1em永远与字体大小相同
对齐方式：left、right、center、justify（两端点对齐）

 p{ text-align：left: ;}/*调节左右对齐*/

11.css段落样式——定义行高

line-height：
定义：一行文字的高度
默认：不是固定值，而是变化的。根据当前字体大小在不断的变化。
取值：1.number（px）|scale（比例值，跟文字大小成比例的）

p{ line-height:30px ;}

12.css段落样式——字间距与词间距

1.letter-spacing：定义字间距
2.Word-spacing：词之间的间距（针对英文段落）
3.强制折行：（针对英文、数字不自动折行）
（1.）word-break:break-all；（非常强烈的折行）
（2.）word-wrap：break-word；（不是那么强烈的折行，会产生空白区域）