网页设计课堂笔记

墨染Mr

已于 2024-04-29 15:38:51 修改

阅读量348

点赞数 4

文章标签：笔记 css html

于 2024-03-13 16:10:26 首次发布

本文链接：https://blog.csdn.net/2301_77109445/article/details/136682016

版权

2. 添加CSS方法2：内嵌式，嵌入在head标签中，标定一类标签下文本的属性

1. 元素选择器`(类型、标签、选择器)`，根据标签选择设置属性

2. 类选择器——可多个叠加

3. ID选择器——每个ID与该选择器一一对应

3. 添加CSS方法3：链入式

属性补充

初识网页设计

<html>网页中所有内容都在这对标签之中
   <head>网页的标题以及部分属性信息会放在这里</head>
   <title>网页的标题</title>
   <style>部分属性词条</style>
   <body>网页主题内容</body>
   
   <h1>一级标题</h1>
   <h2>二级标题</h2>
   ……
   <h6>六级标题</h6>
   
   <p>段落标签</p>
   换行标记<br>
</html>
   
   <!-- 注释，ctrl+/ 快速注释 -->

跳转标签

a标签的格式是这样的：

<a href="跳转地址">跳转连接</a>

跳转地址的方式有三种

1. 绝对路径：从根目录开始，一层一层的寻找。
D:\ProgrammingLanguage\Web\HTML_Run\3-1(3-4)\html\3-4-1.html
2. 相对路径：从当前文件所在的文件夹开始，向下或者向上寻找。
如果在本层或者向下寻找，接续本文件夹直接续写即可：html/3-4-1.html
如果需要返回上一层，每返回一层添加一个`../`：../3-4.html
3. IP路径：会随IP改变而变化，故不唯一。
<http://127.0.0.1:8555/HTML_Run/2-27(1-2)/1-2.html>

属性

一般的文本等需要更改：颜色color 字号font-size
字体font-family 字重font-weight 斜体fent-style

我们通过`CSS`代码改变这些属性，改变这些属性的方法有三种：

1. 添加CSS方法1：内联式/行内式

<p style="color: orange;">行内式</p>

2. 添加CSS方法2：内嵌式，嵌入在head标签中，标定一类标签下文本的属性

1. 元素选择器`(类型、标签、选择器)`，根据标签选择设置属性

     h1{
         color: skyblue;
      }

该例所示为将`h1`标签下文本改为`天蓝色`。
之后h1标签无需任何标识都自动为天蓝色。

2. 类选择器——可多个叠加

命名规则：".类名{ }"

 ```css
      /* style标签内 */
      /* CSS注释 */
      /* CSS代码区域，与html区不同 */
      .orange{
         color: orange;
      }
      .font24{
         font-size: 24px;
      }

      ```

类选择器的使用：

``html
      <h2 class="orange font24">橙色，字号24px</h2>

      ```

3. ID选择器——每个ID与该选择器一一对应

命名规则："#ID名{ }"

    ```css
      #h3id{
          color: orangered;
      }
      ```

ID选择器的使用：

 ```html
      <h3 id="h3id">橙红色</h3>
      ```

3. 添加CSS方法3：链入式

需要创建`.css`文件

``css
   /* 该文件中只能是CSS代码 */
   .red{
   	color: red;
   }
   .blue{
   	color: blue;
   }
   .font24{
   	font-size: 24px;
   }
   #pid{
   	color: blue;
   }
   ```

使用方法和第二类相同，但需要在head标签内添加一个link标签到该css文件。


   ```html
   <head>
   	……
       <link rel="stylesheet" href="3-4.css" />
   </head>
   <body>
       <!-- 可以想第二种一样直接调用 -->
       <h1 class="red">红色</h1>
   	<p id="pid">蓝色</p>
   </body>
   ```

属性补充

优先级:ID>类>标签，越特殊的选择器优先级更高。

颜色的三种表示法：

 ```css

    <p>{
        /* 1.预定义词 */
      color: skyblue
      /* 2.rgb (255最大) */
        color: rgb(255,150,190)
      /* 3.16进制写法 (每两位对应rgb中一个数) */
        color: #55ff00
    }

    ```

字重的两种表示法：

 ```css
    <p>{
        /* 1.预定义词：bold/bolder/normal/lighter */
        font-weight: bold;
        /* 2.100-900的整百数，默认值 normal 400 */
        font-weight: 900;
    }

    ```

字体设置

电脑预定义了很多字体都可以使用。

 ```css
    <p>{
        font-family: '仿宋';
    }

    ```

斜体设置

```css
    <p>{
        /* oblique/italic 都表示字体倾斜 */
        font-style: italic;
    }

    ```

盒模型

在html文件中使用盒模型的方法如下

<head>
	<link rel="stylesheet" href="7-8.css"/>
</head>
<body>
	<!-- 盒模型 -->
	<!-- div标签——特殊的自定义标签 -->
	<div class="box">开盒啦</div>
</body>

盒模型中的文字信息均在<div>标签内。
可以使用F12打开网页开发人员工具
需要设置在`.css`文件中，其格式：.box{ }
盒的内部由内到外依次为padding border margin

/* .css文件中编辑盒模型的属性 */
.box{
    /* 盒的宽度 */
    width: 200px;
    /* 盒的高度 */
	height: 200px;
    /* 盒的背景颜色 */
	background-color: lightskyblue;
    
/* 1.padding：边框属性 */
	/* 四边 */
	padding: 10px;
	/* 上下 左右 */
	padding: 10px 20px;
	/* 上 左右  下 */
	padding: 10px 20px 30px;
	/* 上 右 下 左 */
	padding: 10px 20px 30px 40px;
    
    /* 单独设置 */
	padding-top: 11px;
	padding-right: 12px;
	padding-bottom: 13px;
	padding-left: 14px;
    
/* 2.border：边线属性 */
	/* 整体写 宽度 线形 颜色 */
	border: 10px solid red;
	
	/* 分开写1 */
	border-width: 10px;
	border-style: solid;
	/* 实线solid 虚线dashed	点线dotted	双线double	无线none */
	border-color: orange;
	
	/* 分开写2 */
	border-top: 10px solid red;
	border-left: 10px solid blue;
	border-bottom: 10px solid olivedrab;
	border-right: 10px solid fuchsia;
	
	/* 分开写3——1+3并用 */
	border-top-width: 11px;
	border-right-color: purple;
	
	/* 设置边框无格式 */
	border-bottom: none;

/*3.margin：边缘属性——当前这个东西距离页面边缘边多远 */
	margin-left: 100px;
	/* 相反方向顶格 */
	margin-left: auto;
	/* margin-right 和 margin-bottom 一般没啥用 */
	/* 上边距离0,左右居中 */
	margin: 0 auto;
}

背景

1.通用选择器

选择全部标签，优先级很低，一般用于消除白边

*{
	margin: 0;
	padding: 0;
}

2.背景颜色

优先级低于image

background-color: red;

渐变背景色

参数：方向（30deg 顺30度方向 to right/left 向左向右渐变）颜色1 颜色2

background-image: linear-gradient(-30deg,green,pink);

image控制，与插入图片url冲突（谁在下面生效谁）

控制元素背景显示区域

border-box padding-box默认值 content-box 超出对应部分会被裁剪 text 只会渲染text部分

background-clip:text ;

3.插入图片背景

background-image: url('1.png');

平铺

repeat平铺(用图片填充多余像素)
repeat-X repeat-Y no-repeat(不填充)

 background-repeat: repeat-x;

设置背景图片大小

cover：铺满整个容器，多余的部分会被裁掉
contain：至少有一张完整的图呈现出来，一定会有多余的空间

 background-size: contain;

4.固定视窗

.box{
    background-attachment: fixed;(#背景图片不会随着页面的滚动而滚动)
    background-attachment: scroll;(#背景图片随着页面的滚动而滚动，默认值)
    background-attachment: local;(#背景图片会随着元素的内容滚动而滚动)
}

透明色

 .box{
     color: transparent;(#将字体设置为透明)
     background-clip: text;(#以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉)
     text-align: center;(#让字的位置居中)
}

行内/块元素

<img src="1.png" alt="">
<!-- 元素类型 块元素black ele 行内元素inline ele -->

<!-- 块元素div p h1-h6 table ul ol li dl-- >
1. 每个元素具有宽高属性独占一行，相当于前后都带有换行符
2. 块级元素内可以嵌套行内元素和块级元素
<!-- 行内元素：img input a em span -->
1. 不独占一行
2. 行内元素内只能嵌套行内元素
3. 宽度只与内容有关
4. 行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

在.css文件中可以设置图片的一些属性

```css
img{
	width: 1080px;
    height: 680px;
    /* 两个往往不同时使用，单个使用会按照比例缩放，一起使用会改变原图形状 */
}
```

浮动

浮动：设置元素浮动，可以让元素脱离文档流，从而不具有元素在文档流中特点

块元素不会独占一行，行内元素也可以设置宽高等等

设置元素浮动：float

可选值：none 默认值

left 向左浮动

right 向右浮动

设置元素浮动后的特点

1、元素脱离文档流，元素一旦脱离文档流，就不会占据原来在文档流中的位置，其下面的元素会立即跑上去
2、元素浮动之后，不会超过它前一个兄弟，最多一边齐
3、如果前一个兄弟没有浮动，下面浮动的元素，也不会跑到前面
4、设置元素浮动后，元素也是尽量的向左或者向右进行浮动
5、浮动元素不会超过其父元素的范围

块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，

如果希望块元素在页面中水平排列，可以使块元素脱离文档流

使用float来使元素浮动，使一个元素向其父元素的左侧或右侧移动，从而脱离文档流


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    
    <style type="text/css">
      #box {
        width: 500px;
        height: 600px;
        background-color: #ccc;
        margin: 0 auto;
      }
      #box>div{
        width: 100px;
        height: 100px;
        background-color: red;
      }
      /* margin可以调整元素的位置 ，但大的位置调整最好不用，常用于小的位置间距调整*/
      #box>.box1{
        float: left;
      }
      #box>.box2{
        width: 150px;
        height: 150px;
        background-color: green;
        float: left;
      }
      #box>.box3{
        background-color: yellow;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>

布局常用样式属性

width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法，分别设置四个边的：
border-top 设置顶边边框，如：border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如：border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

文本常用样式属性

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px