html标签，css属性,备忘

html

css

html

无序列表

有序列表

输入框显示默认字符

输入框为空提交提示-(文本输入框设置为必填项)m

单选-复选-默认选中

---

创建无序列表

<ul>
   <li>cat nip</li>
   <li>laser pointers</li>
   <li>lasagna</li>
</ul>

• cat nip
• laser pointers
• lasagna

---

创建有序列表

<ol>
   <li>dog</li>
   <li>big dog</li>
   <li>water</li>
</ol>

1. dog
2. big dog
3. water

---

输入框显示默认字符

<input type="text" placeholder="默认字符">

---

输入框为空提交提示

添加required属性

<form action="">
   <input type="text" required />
   <button type="submit">submit</button>
</form>

点击submit按钮会出现提示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-veKaAsbG-1651159779746)(https://bayimg.com/c1a54aad2b4c50f025b0f453c17abd85c8adfe6f.jpg)]

---

单选, 复选, 默认选中, value值

单选

<input type="radio" name="test-dx">
<input type="radio" name="test-dx">

复选

<input type="checkbox" name="test-fx">
<input type="checkbox" name="test-fx">
<input type="checkbox" name="test-fx" checked>

value属性的值作为发送到服务器端的实际内容

---

css

@media 媒体查询和css代码块

css变量

背景属性

文本属性

文本加粗

文本斜体

文本下划线

文本删除线

文本水平线

reba() 调整文本的背景色

text-align属性设置文本对齐方式

谷歌字体库

字体降级

长宽大小设置

边框属性

属性选择器

选择器优先级

内边距-外边距-边框

十六进制编码表示颜色

使用rgb混合颜色

设置圆形图片

文本属性

color     文本颜色
font-size     字体大小
font-family     字体族名

谷歌字体库

谷歌字体库

引入谷歌字体库

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

字体降级

font-family: Helvetica, sans-serif;

浏览器默认字体有monospace, serif, sans-serif 等

---

长宽大小设置

width     宽
height     高 

边框属性

border-color	 边框颜色
border-width	 边框宽度
border-style	 边框线
border-radius	 边框角(设置圆角边框)

设置圆形图片

border-radius: 50%;

背景属性

background-color	 背景颜色

内边距(padding), 外边距(margin), 边框(border)

padding     内边距
margin     外边距
border     边框

padding 用来控制着元素内容与 border 之间的空隙大小

外边距 margin 用来控制元素的边框与其他元素之间的 border 距离

如果你把元素的 margin 设置为负值，元素会变得占用更多空间

CSS 允许你使用 padding-top, padding-right, padding-bottom, padding-left属性来设置四个不同方向的 padding 值。

属性选择器

[type='radio'] {                 // 选择属性为radio的所有单选框 
   margin: 10px 0px 15px 0px;    // 外边距设置  上 右 下 左
}

选择器优先级

!important > 内链样式 > id选择器 > class选择器 > 继承样式

color: pink !important;

十六进编码表示颜色

#000000
 红绿蓝
 
 F      0  
最大    最小

使用rgb值表示颜色

rgb(0, 0, 0)
   红 绿 蓝
    
最小   0  ~  255   最大

css变量

--penguin-skin: gray;     // 创建css变量  --name

background: var(--penguin-skin);     // 使用变量 var(--name)

给CSS变量设置默认值

background: var(--penguin-skin, black);

:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素

:root {

}

@media 媒体查询和css代码块

https://chinese.freecodecamp.org/learn/responsive-web-design/basic-css/use-a-media-query-to-change-a-variable

<style>
     @media (max-width: 500px) {
          /** 当屏幕宽度符合条件时代码块被运行 */
     }
</style>

text-align属性设置文本对齐方式

CSS 里面的 text-align 属性可以控制文本的对齐方式。

text-align: justify; 将文本隔开，使每行的宽度相等。

text-align: center; 可以让文本居中对齐。

text-align: right; 可以让文本右对齐。

text-align: left; 是默认值，它可以让文本左对齐。

文本加粗

<strong></strong>
font-weight: bold;

添加文本下划线

<u></u>
text-decoration: underline;

文本斜体

<em></em>
font-style: italic;

给文字添加删除线

<s></s>
text-decoration: line-through;

添加文本水平线

<hr>

用 rgba() 调整文本背景色

RGB 值可以取在 0 到 255 之间。 alpha 值可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。 rgba() 在需要设置颜色透明度时十分有用， 这意味着你可以做出一些很漂亮的半透明效果。

background-color: rgba(45, 45, 45, 0.1);

rgba 代表：
  r = red 红色
  g = green 绿色
  b = blue 蓝色
  a = alpha 透明度