语法规范:#

语法:
- h1 {color:red; font-size:25px;}:h1^选择器color:^属性red:^值
  - 需要写在头文件的<style>标签内
- 紧凑格式:h1 {color:red; font-size:25px;}
- 展开格式: h1 { color
  Invalid admonition directive. (Admonition directives must be of block type ":::note{name="name"} <content> :::")
  ; font-size:25px; }```
  - 都是用小写
  - 属性值前面,冒号和后面保留空格
  - 选择器,如 p h1 后面也需要保留一个空格

选择器:

基础选择器:

标签选择器:使用标签名选择,如p h1 div等,将整个选择类型都进行修改

类选择器:单独指定某个或者某几个

PRTCL // CSS

1
/* 头文件 head 内
2
  #指定一个属性并命名为 sample*/
3
 <style>
4
  .sample {
5
    color: blue;
6
  }
7
/* body 内
8
  #在标签中使用 class 调用类选择器 sample 的属性
9
    #可用于不同的标签类型 */
10
<ul>
11
  <li class="sample"> 冰雨 </li>
12
</ul>
13

14
<div class="sample"> 陈楚生 </div>

多类名:给一个标签贴上多个类名

类名之间需要用空格隔开

PRTCL // CSS

1
  <head>
2
    <style>
3
        .font-red {
4
            color: red;
5
        }
6
        .font35 {
7
            font-size: 55px;
8
        }
9
    </style>
10
</head>
11
<body>
12
    <div class="font-red font35"> 刘德华 </div>
13
</body>
14
</html>

id 选择器:

PRTCL // CSS

1
/* 定义 */
2
  <head>
3
    <style>
4
    #id 名 {
5
      属性 1: 值 1;
6
      ...
7
      }
8
    #pink {
9
      color: pink;
10
      }
11
    </style>
12
  </head>
13
  /* 使用 */
14
  <body>
15
    <div id="pink"> 迈克尔·杰克逊 </div>

每个 id 都是唯一的,只能调用一次

通配符选择器:
- 使用*定义,*表示所有,将所有标签都定义为其值
  PRTCL // CSS
```
1
<sylte>
2
  * {
3
  color: red;
4
  }
5
</style>
```

复合选择器:
- 复合选择器是建立在基础选择器之上,由基础选择器组合而来
  - 后代选择器:
    - 可以选择父元素里面的子元素
    - 从父到子依此书写,用空格隔开父元素 空格 子元素 {样式}
    - ul li { }即可选择到ul元素下的li元素
  - 子选择器
    - 只选择最近一级的子元素"亲儿子",不影响之下层级的元素
  - 并集选择器
    - 可以选择多组标签,同时定义样式,通过,英文逗号连接多个标签
    - 并集选择器每一个选中的选择都会竖相排列
  - 伪类选择器
    - 用于添加效果
    - 用:进行标识
      - 链接伪类:
        a:link:选择所有未被访问的链接
        a:visited选择所有已经被访问的链接
        a:hover选择鼠标指针聚焦的链接
        a:active选择活动链接^{鼠标点击后还未弹起的链接}
        *TIPS:
        * 必须按照link visited hover active顺序编写
        链接都有默认颜色,所以要单独指定样式
        最常用的👇
        PRTCL // CSS
        1 /*a 是标签选择器所有的链接 */ 2 a { 3 color:gray; 4 } 5 /* :hover 是连接伪选择器,鼠标经过 */ 6 a:hover { 7 color: red;/* 鼠标经过,链接由灰变红 */ 8 }
      - focus 伪类选择器
        用于获取焦点

字体属性#

字体系列

font-family:"微软雅黑"

PRTCL // CSS

1
  <head>
2
      <style>
3
          h2 {
4
              font-family: ' 黑体 ';
5
              font-size: 30px;
6
          }
7
          p {
8
              font-family: 'Microsoft Yahei' 'Herago Sans GB';
9
              font-size: 20px;
10
              font-weight: bold;
11
          }
12
      </style>
13
  </head>
14

15
  <body>
16
     <h2> 蜜桃成熟时 </h2>
17
      <p> 那一抹最漂亮的粉 </p>
18
      <p> 优雅,淡然,纯净 </p>
19
      <p> 上吧,在不上人家就走啦!</p>
20
  ```

font-size: 20px:设定文字大小
font-weight:文字粗细normal bold bolder loghter 也可由 100~900 指定粗细如:font-weight: 700,提倡使用数字标记粗细
- normal=400
- bold = 700
font-style:文字样式
- normal 默认显示
- italic 倾斜显示

复合属性:
- font: font-style font-weight font-size/font-height font-family
  PRTCL // CSS
div { font: font-style font-weight font-size/line-height font-family } /必须严格按照风格|粗细|字号|字体顺序排列/
/案例/ h2 { font-style: normal; font-weight: bold; font-size: 30px; font-family: ‘Microsoft YaHei’; } /可以写为/ h2{ font: normal bold 30px ‘Microsoft Yahei’ } ```

文本属性#

文本颜色
- color: red;
  - 可以用颜色词如:pink blue gray
  - 可以用十六进制#F3F3F3
  - 可以用 RGB 代码rgb(255,0,0)括号中的值分别对应三原色
对齐文本
- text-align:只能用于水平对齐
  - text-align: left 左对齐 right右对齐 center居中
装饰文本
- text-decoration:给文字添加下划线 删除线 下划线 等装饰
  - none默认’无’
  - underline下划线
  - overline上划线
  - line-through删除线

文本缩进

text-indent:首段落缩进

PRTCL // CSS

1
  div {
2
  text-indent: 32px;/* 缩进多少用值表示 */
3
  }
4
  ```
5
- `px`像素
6
- `em`文字的大小

行间距
- line-height:文字与文字之间的距离
  - line-height: 25px使用像素为值,行高是包含文字大小的

CSS 引入方式#

样式表
- ~~行内样式表 ( 行内式 )~~
  - <div style="font-size: 20px"?>直接在标签中加入style属性,且使用" 双引号包含需要设置的样式
- 内部样式表 ( 嵌入式 )
  - 将所有需要的css都放在<style>标签中
  - <style>标签于html文件中,一般于<head>标头中
  - 清晰直观,但是未与 html 分开不便管理
- 外部样式表 ( 链入式 )
  - 单独制作一个css文件 ,然后将css引入html页面
  - 在html页面使用<link rel="stylesheet" href="css 文件路径">的方式引入 css 配置文件

Emmet 语法#

HTML快速生成
- 标签直接输入标签名后 tab 即可,如div后tab,可直接生成`
- 标签后添加*＋数字则可以快速生成多个,如div*3可生成 3 个div
- 父子级关系,可以直接用>,比如ui>li
- 兄弟级关系,可以用加号+,例如div + p
- 如果生成有类名字或者 ID 名字的
  - 直接写.demo,对应默认生成<div class="demo"
  - 直接写#demo,对应默认生成<div id="demo">
  - 也可以使用p.one,则会生成 <p class="one"
- 如果想要生成有顺序的,.demo$5会生成从<div class="demo">一直到<div class="demo5">
- 想要在生成标签内写内容可以直接使用{},div{demo 这是一个 demo}会生成<div>demo 这是一个 demo</div>
CSS快速生成
- text-align: center;可以简写为tac,为各个单词首字母
- text-indent: 2em;可以简写为ti2em
- width: 100px=w100
- height: 20px=h20

元素的显示模式#

就是元素 < 标签 > 以什么方式显示
- 块元素
  - 独占一行 高度\宽度\内外\边距可修改 默认与父级宽度一致 可以内置其他元素 文字类标签不允许放置块级元素
- 行内元素
  - 一行多个 高宽无法直接修改 默认宽度就是内容宽度 只能容纳文字和行内元素
    - 链接内无法再放链接,可以把链接转换为块级元素
- 行内块元素
  - 如 <img /> <input /> <td>等元素,同时具有块元素和行内元素的特点
    - 一行可显多个 中间会有空隙 默认宽度为内容的宽度 宽高\内外边距都可修改
元素模式转换
- *display:
  - inline 行内元素
  - *block 块级元素
  - *inline-block 行内块元素

文字居中#

行高设置为盒子元素高度即可^{行高是包含文字本身高度的}

CSS 背景#

背景颜色background-color
- 可以设置透明transparent 或者颜色'color'属性
背景图片background-image
1. 和插入图片相比,好控制位置
  - background-image:url(#)
  - none值则没有备件图片
2. 图片平铺background-repeat
  - 默认平铺
  - repeat no-repeat repeat-x repeat-y
3. 图片位置background-position
  - background-position: x y
  - x y 可以用值确认精确位置,必须先x位置再y位置,也可也指令某一个值为方位名词
  - 也可以用 top center bottom left center right方位名词
4. 图像固定background-attachment
  - scroll:滚动
  - fixed:固定
背景复合写法:
- background:颜色图片地址平铺是否滚动位置
- background:white url(#) no-repeat fixed top
背景颜色半透明
- background: rgba(0,0,0,0.3)^{设置 alpha 不透明度}
- 只更改背景色,不调整元素中的内容

三大特性#

层叠行
- 样式冲突的情况下,多个样式按照顺序选择最后一个值
- 样式不冲突的不会层叠,直接多个样式同时执行
继承性
- 子标签会继承父标签的某些样式: 字号 字符大小 字体风格 行高 行间距 `等
- 可以通过这个特性,直接修改body样式,达到整个页面文字样式统一
优先级
- 指定多个选择器
  - 选择器相同,样式层叠
  - 选择器不同,根据选择器权重
    - !important 重要的 > 行内样式 style="" > ID 选择器 > 类选择器,伪类选择器 > 元素选择器 > 继承或者 *
- 复合选择器会有权重叠加
  - 选择更加精确会有更大的权重 div ul li > ul li > li
  - 继承的权重为0!!!

盒子模型^{利用盒子摆样式}#

分析并准备好网页元素
利用 CSS 设置号每个盒子的样式,摆放到相应位置
填充盒子中的内容

组成部分
- border- 边框
  - width :粗细,单位 px
  - style :样式
    - None无
    - hidden隐藏
    - dotted点线
    - dashed虚线
    - solid实线
    - double双实线,两台先与其间隔的和等于指定的border-width
    - groove根据border-color值画凹槽
    - ridge根据~画菱形边框
    - inset根据~画 3D 凹边
    - outset根据~画 3D 凸边
  - color: 颜色
  - 一般写为: border : border-width border-style border-color
  - border: 25px solid black没有顺序要求
  - collapse : 控制绘制表格的边框collapse^合并
  - * 使用外边框,将会将盒子的空间扩展
- content 内容
  - padding- 内容和盒边距
    - top:20px 顶部距离边框 20 像素
    - left :20px 左侧距离边框 20 像素
    - bottom:20px 底部距离边框 20 像素
    - right:20px 右侧距离边框 20 像素
    - padding:' 上 ' ' 下 ' padding:10px 10px
    - padding : 上左右下 padding:10px 5px 10px
    - padding: ' 上 ' ' 右 ' ' 下 ' ' 左 ' padding: 10px 5px 10px 5px
padding内边距
- 如果盒子本身没有指定宽高,此时Padding的值则不会撑开盒子大小
margin 外边距
- 盒与盒的间距
  - 以上内外边距二级参数均为left right top bottom
  - margin: 5px 10px 15px 20px; 复写顺序为 上右下左
- 外边距可以使盒子水平居中
  - 只能给块元素使用
  - 其余元素需要给父元素添加 text-align:center 来达成居中
  1. 盒子必须指定的宽度width
  2. 左右边距必须是auto 默认
    1. 常用居中设置 margin: 0 auto;
- 嵌套元素的塌陷问题
  - 嵌套的块元素,父子同时有上外边距时,会导致父元素``上外边距塌陷
  1. 为父元素定义上边框
    - border: 1px solid transparent;使用“transparent`添加一个透明边框
    - 会导致此盒子多出像素
  2. 为父元素定义上内边距
    - padding: 1px 或者 padding-top:1px
    - 会导致此盒子多出像素
  3. 为父元素添加 *overflow:hidden
    - 此方��不会导致盒子有大小变化

清除内外边距#

每个不同的元素都带了不同的内外边距
#必须写在 style 中使用 *{padding:0; margin:0;} 来清除所有默认边框

圆角边框#

border-radius:length值为半径,可以是 值 也可以是百分比
圆形:正方形元素,把这个值设置为边长的一半
- 简写规则:
  - 4 个值:border:左上右上右下左下 值与上方规则一致
  - 2 个值: border:左上右上会按照对角线生成圆角
  - 指定某一个角,border-top-left指定左上角

盒子阴影#

box-shadow :
- h-shadow :水平阴影的位置.允许负数
- v-shadow:垂直阴影的位置.允许负数
- blur:模糊距离
- spread:阴影的大小
- color:阴影颜色
- inset:内部阴影
  - 阴影不影响盒子像素大小

文字阴影#

text-shadow:
- h-shadow :水平阴影的位置.允许负数
- v-shadow:垂直阴影的位置.允许负数
- blur:模糊距离
- color`:阴影颜色

CSS 浮动#

属性:
1. 可以改变标签默认的排列模式
2. 可以让多个块级元素同行显示
3. 竖向排列基本都是默认标签排列,浮动基本用于横向排列
4. 贴近到相近元素的边缘
load : none left right 对应 不浮动 左浮动 右浮动
特性
1. 浮动元素会脱离标准流
  - 浮动的盒子不再保留原先的位置
  - 原本的位置会被相邻标签元素替代
  - 如果父元素无法包含浮动元素,剩下的元素会另起一行
2. 浮动元素会具有行内块元素的特性
3. 浮动元素经常和``标准流``父级搭配使用
  - 为了约束浮动的元素,先采用标准流父级排列上下,在用浮动排列左右
注意:同一个方块中的元素,只要有一个标签浮动,那都需要浮动,不然会出问题
- 浮动的盒子指挥影响后面代码的标准流,不会影响到前面的标准流
清除浮动
1. 本质是为了清除浮动所带来的其他影响
2. 如果父盒子本身有高度就不需要清除浮动
3. 清除浮动之后,父级就会根据子级的高度自动调整高度
- clear:
  1. left:清除左侧
  2. right:清除右侧
  3. both:都清除
如何使用:
1. 额外标签法称之为隔墙法,是 W3C 推荐的做法
  1. 在浮动标签的末尾添加一个空标签
    PRTCL // CSS
    1 <div style=" clear:both" > </div> 2 /* 或者 */ 3 <br /> 4 /* 只要是空标签皆可 */
  2. 优点:通俗易懂,书写简单.
  3. 缺点:添加许多无意义标签,结构差
  4. 要求添加的空元素必须是一个块级元素
2. 父级添加 overflow 属性
  1. 添加overflow元素,属性值设置为 hidden auto scrll皆可
    1. auto 自动
    2. hidden 删除浮动,无法查看溢出部分
    3. scrll 删除浮动,显示拖动条
  2. 优点:代码简洁
  3. 缺点:无法显示出溢出的部分
3. 父级添加 after 伪元素
  1. :after
    PRTCL // CSS
    1 .clearfix:after{ 2 content:""; 3 display:block; 4 height:0; 5 clear:both; 6 visibolity:hidden; 7 } 8 .clearfix{ /* IE6 IE8 专用 */ 9 *zoom: 1; 10 }
4. 父级添加双伪元素
  PRTCL // CSS
```
1
.clearfix:before, .clearfix:after {
2
  content:"";
3
  display:table;
4
  }
5
.clearfix:after{
6
  clear:both;
7
  }
8
.clearfix {
9
  *zoom:1;*
10
  }
```

CSS 书写顺序#

布局定位: display position float clar visibility overflow ( 建议 display 第一个写,关系到整个页面的模式 )
自身属性: width height margin padding border background
文本属性: color font text-decoration text-align vertical-align white-space break-word
其他属性: content cursor border-radius box-shadow text-shadow background:linear-geadient...

数学顺序: 整体布局 元素自身属性 元素内文本属性 美化属性

CSS

语法规范:#

字体属性#

文本属性#

CSS 引入方式#

Emmet 语法#

元素的显示模式#

文字居中#

CSS 背景#

三大特性#

盒子模型^{利用盒子摆样式}#

清除内外边距#

圆角边框#

盒子阴影#

文字阴影#

CSS 浮动#

CSS 书写顺序#

CSS

HTML学习

for循环

while循环

CoPaw本地模型配置

评论

语法规范:#

字体属性#

文本属性#

CSS 引入方式#

Emmet 语法#

元素的显示模式#

文字居中#

CSS 背景#

三大特性#

盒子模型利用盒子摆样式#

清除内外边距#

圆角边框#

盒子阴影#

文字阴影#

CSS 浮动#

CSS 书写顺序#

CSS

HTML学习

for循环

while循环

CoPaw本地模型配置

评论

盒子模型^{利用盒子摆样式}#