【无标题】

2201_75694264

已于 2024-08-09 20:25:54 修改

阅读量326

点赞数 5

文章标签： java 服务器前端

于 2024-08-08 20:02:18 首次发布

本文链接：https://blog.csdn.net/2201_75694264/article/details/141034156

版权

表单补充

滑动条

<input type="range" value="0" max="100" step="10"

type 属性值 range value 滑动条起始值 max 滑动条最大值 step="10" 一次走10的距离

网址

  <input type="url" name="" id="">

url 框内输入正确的网址带有http:// 否则会提示输入有错误

邮箱

          <input type="email" name="" id="">
          <input type="submit" value="提交">

输入正确的邮箱其中包含@ 否则会给提示 @前后都需要有内容

number

<input type="number" name="" id="" value="2">

使数字增大减小 value 可以设置起始值

日期

<input type="date" name="" id="">

日历表包含年月日

本地时间

 <input type="datetime-local" name="" id="">

拾色器

 <input type="color" name="" id="">

可以调试rgb 的数值调试颜色

搜索

<input type="search" name="" id="">

框架集 frameset

<frameset  rows| cols="10%,*，20%" >
     <frame  name="" src=""  noresize="noresize"  scrolling="yes/no/auto" />
     <frame  name="" src="" >
</frameset>

cols 分割列

rows 分割行

* 表示分割后剩余的全部部分

noresize 规定无法调整框架的大小

frameborder 0/1 规定是否显示框架边框

border 设置边框粗细

scrolling yes/no/auto 规定框架是否出现滚动条

frameset跳转

跳转到frame指定板块

给对应的frame定义name名字

< frame name="right" src="left.html"/ >

修改跳转方式 < a href="one.html" target="right">第一页

iframe内连框架

<iframe name="" src="" frameborder="0|1" width="" height=""
 scrolling="no|auto|yes"></iframe>

name 名称

src:规定在 iframe 中显示的文档的 URL

scrolling:是否在 iframe 中显示no/yes/auto

iframe跳转

<iframe name="" src="" frameborder="0|1" width="" height="" 
scrolling="no|auto|yes"></iframe>
<a href="http://www.baidu.com" target='_top|_parent'>百度</a>

css

css 层叠样式表

CSS 由选择器、属性、属性值组成

css 的三种引入方式

1.内部样式（内嵌样式）

在head中添加style标签进行添加格式

选择器{

属性名：属性值;

}

2.行内样式

在标签后面添加style:"color:red;"

<h1 style="color:red">这是⾏内样式的使⽤⽅式</h1>

3.外部样式

通过link 引入外部css文件

<link rel="stylesheet" href="url"/>

4.通过@import引入

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
          @import url('');
        </style>
    </head>
    <body>
        <h1 class="text">外部样式</h1>
    </body> 
</html>

或者在css文件中引入

@import url('');
 div{
  color:red;
 }

注意：在css中引入只能放在第一行，否则无效

选择器

标签选择器

p3{
            color: red;
        }

类选择器

选择器名称以 . 开始后面跟上class属性值

  <style>
.box{
            background-color: aqua;
        }
</style>
<div class="box"></div>

id选择器

<style>
  #main{ color:red; }      
 
</style>
<p id="main">字体颜色</p>

id选择器名称以#开始，后面加上对应的属性值

通配符选择器

*{

     padding:0;
     margin:0;

  }

* 代表通配符能够适配所有元素

分组选择器

h1, h2, p {
  text-align: center;
  color: red;
}

给不同属性加相同样式用分组选择器，每个属性间用逗号隔开

选择器的优先级

ID选择器 >类选择器>标签选择器>通配符选择器

选择器的权重

权值等级划分，一般来说是划分4个等级：

类型	权重
内联样式	如：style="",权值位1000
ID选择器	如：#name, 权值位100
class类选择器，伪类和属性选择器	如：.name 权值为10
标签选择器和伪元素选择器	如： div p , 权值为1
通用选择器（），子选择器（>）,相邻选择器（+），同胞选择器（~），继承通用选择器（），子选择器（>）,相邻选择器（+），同胞选择器（~）,继承	如 * 权值为0000

最高权重

！important 提升优先级为最高（不常用）

css的颜色值

1.十六进制表示方式 eg:#rrggbb

2.英文单词表示 eg: red

3.rgba 表示颜色 a 表示透明度范围0~1

4.百分比表示颜色rgb(x%,x%,x%) 比较少用

css的长度单位

px 像素（常用）

% 百分比

em Element meter 根据文档字体计算尺寸倍数

rem Root element meter 根据根文档（ body/html ）字体计算尺寸

calc 用于计算剩余部分的长度 eg: calc(100%-300px)

字体样式

1字体样式

font-style 设置字体样式

normal：指定⽂本字体样式为正常的字体

italic：指定⽂本字体样式为斜体

2文本字体

p {
    font-family:"微软雅黑";
}

3字体粗细

font-weight：定义字体粗细

normal：正常的字体。相当于number为400

bold：粗体。相当于number为700

bolder：特粗体。也相当于strong和b标签的作⽤lighter：细体

数字范围100~300 细体 400~500 正常 500往上粗体

4字体大小


p { font-size:20px; }
}

像素值最为常用 em 指的是父级字体的倍数 rem 指的是body html 的字体倍数字体值没有负数

5字体行高

p {
    line-height: 40px;
}

6综合设置

CSS字体属性font定义字体，加粗，⼤⼩，⽂字样式。该属性是复合属性

font：<font-style> <font-weight> <font-size>/<line-height> <fon-family>
p {
    font:20px/1.5 '微软雅⿊'
}
p {
    font:bold 20px/30px '微软雅⿊'
}

必须按顺序全部写完

7引入外部字体


@font-face {
    font-family: my-font;/*自定义名称*/
    src: url('时尚中黑简体.ttf');
}
@font-face {
    font-family: my-font2;
    src: url('迷你简双线体.ttf');
}

为了避免用户字体缺省，需要在服务器端设置好页面的字体样式，让网页以最佳方式进行展示直接将下载好的字体复制到当前文件夹下（网站下载新字体）想要使用外部字体，需要进行引入

2201_75694264

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫