【无标题】

最新推荐文章于 2024-10-01 23:20:42 发布

zowa_zw

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量88

点赞数

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/zowa_zw/article/details/126206162

版权

1.css基础语法

格式：选择器{属性：值1；属性：值2}
单位：px：像素，%：百分比
基本样式：
width：宽
height：高
background-color：背景颜色
css注释：/ * 注释内容*/

Document

这是一个块

## 2.内联样式与内部样式内联样式：在HTML标签上添加style属性来实现内部样式：在< style>标签内添加的样式，优点是可以复用代码 ## 3.外部样式的两种写法 ### 3.1< link>标签属性：rel指定资源跟页面关系， href：资源地址引入一个单独的css文件，文件名为：name.css

3.2 通过@import方式引入外部样式

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <title>Document</title>
    <style>
        @import url('./community.css')
    </style>
</head>
<body>
    <div >这是一个块</div>
    
</body>
</html>

4. css颜色表示法

1.单词表示法：red、blue、green
2.十六进制表示法：#000000~#ffffff
3.rgb三原色表示法：rgb(255,255,255);
注意：可以通过取色工具来获取相关数据，如QQ ctr +alt+a

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{background-color: #ff0000;}
        p{background-color:rgb(255, 212, 000) ;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p>这是一个段落</p>
</body>
</html>

5.css背景样式

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：数字或单词

5.background-attchment：背景图片随滚动条的移动方式
scorll:随滚动条滚动
fixed：不随滚动条滚动

6.边框样式

1.border-style：边框样式
solid：实线
dashed：虚线
dotted：点线

2.border-width：边框大小
3.border-color：边框颜色
也可对一条边设置：格式:border-right-style

7 文字样式

7.1字体类型

font-family：字体类型
英文字体：Arial、‘Time New Roman’
中文字体：宋体、微软雅黑
中文字体的英文名称：微软雅黑：‘Microsoft YaHei’，宋体：Simsun
一般情况会设计多个字体，让电脑根具已有的字体去对应，字体出现空格要用引号

 <style>
        div{font-family: 宋体;}
      
    </style>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{font-family: 宋体;}
      
    </style>
</head>
<body>
    <div>这是一个块</div>
    
</body>
</html>

7.2 衬线体和非衬线体

衬线体的笔画在开始和结束处有额外的修饰，并且笔画横竖粗细不一。非衬线体则是所有笔画粗细一致，并且在笔画的开始和结束处没有额外的修饰线条。

7.3 字体大小粗细样式

<style>
        div{font-family: 宋体;}
        font-size
      
    </style>

名称	作用
xx-small	最小
x-small	较小
small	小
medium·	中等
large	大
:x-large·	-较大:
xx-large	最大

设计是最好设计成偶数
2.font-weight：字体粗细
模式：正常（normal）加粗（bold）
数值：100~900
3.font-style：字体样式
模式：正常（normal）斜体（italic）
注意：oblique也表示斜体
itialic：有倾斜属性的字体可以设计
oblique：不带倾斜属性的也可以设计，一般用itialic，
color：字体颜色

8.段落样式

8.1 文本修饰和文本大小写

1.text-decoration:文本修饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何修饰：none
2.text-transform：文本大小写（针对英文）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalized

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       p1{width: 300px;height: 300px;text-decoration: underline overline;}
      p2{text-transform: lowercase;}
    </style>
</head>
<body>
    <p1>
    听我说谢谢你

    因为有你温暖了四季
        
    谢谢你感谢有你
        
    世界更美丽
        
    我要谢谢你因为有你
        
    爱常在心底
    </p1>
    <p2>I wana say thank you
   
        You bring warmth in very season
           
        I thank you because of you    
        
        The world's more beautiful     
        
        I wana say thank you because of you              
       Love is in my heart</p2>
</body>
</html>

8.2 文本缩进

1.text-indent：文本缩进
主要用于首行缩进
em单位：相对单位，永远与字体大小相同
2.text-align：文本对齐方式
左 left 右 right 中 center

8.3 文本行高

line-height：定义行高
行高：一行文字的高度
数字表示：eg;20px
scale:比例值（与默认文字大小的相比）

 <style>
       p1{line-height: 20px;}
p2{line: height 1;}
    </style>

8.4文本间距与英文行

1.letter-spacing：定义字间距
2.world-spacing：定义词间距（用于英文）
3. 强制折行
world-break：break-all（非常强烈的折行）
world-wrap：break-word（不那么强烈的折行）

9.css复合样式

一个css属性只控制一种样式的时候叫做单一样式，当一个css属性控制多种样式是叫做复合样式。
复合样式：
复合的写法是通过空格的方式实现的，不需要关注顺序问题。
background：red url() repeat 0 0;
border：1px、red、solid
font：
注：最少有两个值：size、family

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div{width:"300px";height:"300px";background:red url(https://tse4-mm.cn.bing.net/th/id/OIP-C.wc_dCG_KbIKZwMdtD3gL2QHaEt?pid=ImgDet&rs=1) no-repeat ;}
    </style>
</head>
<body>
   <div></div>
</body>
</html>