1. 首页
  2. 计算机
  3. 正文

大学生快速掌握HTML5+CSS

image.png

1.DIV和CSS样式   

CSS样式是专门对网页的结构和外貌进行调整

DIV是html的一个标签 css是一个样式表

2.样式表类型

 

2.1.嵌入样式表

DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>标题</title>
      <style>
         .demo1{
            color: red;
            width:100px;
            height:100px;
            background: blue;
         }
      </style>
   </head>
   <body>
      <div class="demo1">
         demo1
      </div>
   </body>
</html>

2.2.外部样式

@import url
@import url("g.css");
.demo1{
            color: red;
            width:100px;
            height:100px;
            background: blue;
         }

2.3.内联样式

<div style="color:blue;width:100px;height:100px; background:black;">demo2div>

3.注释

  1. /* */ 注释内容

  2. <--! -->

4.样式选择器 

  • 元素选择器    div{属性:值}（常用）

  • ID选择器      #id{属性:值}（常用）

  • class选择器   .类名{属性:值}（常用）

  • 子选择器      元数 空格 元素{属性:值}（常用）

  • 后代选择器    元数 > 元数{属性:值}（常用）

  • 属性选择器    元素[属性]{}（少用）

  • 通配符选择器  *{属性:值}（少用）

  • 群组选择器 （少用）

5.背景

  • background-color       规定要使用的背景颜色。 

  • background-position       规定背景图像的位置。       

  • background-size       规定背景图片的尺寸。       

  • background-repeat       规定如何重复背景图像。       

  • background-origin       规定背景图片的定位区域。       

  • background-clip       规定背景的绘制区域。       

（JavaScript中有其他针对图片更详细的使用）

 

  • repeat      默认。背景图像将在垂直方向和水平方向重复。

  • repeat-x      背景图像将在水平方向重复。

  • repeat-y      背景图像将在垂直方向重复。

  • no-repeat      背景图像将仅显示一次。

  • inherit      规定应该从父元素继承 background-repeat 属性的设置。

  • background-attachment       规定背景图像是否固定或者随着页面的其余部分滚动。       

  • background-image       规定要使用的背景图像。 

  • inherit       规定应该从父元素继承 background 属性的设置。       

  • left top

  • left center

  • left bottom

  • right top

  • right center

  • right bottom

  • center top

  • center center

  • center bottom

6.边框

  • 边框颜色 border-color:#000

  • 边框宽度 border-width:1px;

  • border-left 设置左边框，一般单独设置左边框样式使用

  • border-right 设置右边框，一般单独设置右边框样式使用

  • border-top 设置上边框，一般单独设置上边框样式使用

  • border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

 

边框样式值如下：

  • none : 　无边框。与任何指定的border-width值无关

  • hidden : 　隐藏边框。IE不支持

  • dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）

  • dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）

  • solid : 　实线边框（常用）

  • double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

 

（顺序）上右下左顺时针方向，如果只有两个值就是上下，左右

  • groove : 　根据border-color的值画3D凹槽

  • ridge : 　根据border-color的值画菱形边框

  • inset : 　根据border-color的值画3D凹边

  • outset : 　根据border-color的值画3D凸边

 

！！文字属性不等同于文本属性。一个指的是对文字本身进行修改，一个是针对于整个文本来进行结构上的调整

7.文字属性

  • color:red; 文字颜色 #ffeeees

  • font-size:12px; 文字大小

  • font-weight:bolds 文字粗细(bold/normal)

  • font-family:”宋体”文字字体

  • font-variant:small-caps小写字母以大写字母显示

8.文本属性

  • text-align:center; 文本对齐(right/left/center)

  • line-height:10px; 行间距(可通过它实现文本的垂直居中)

  • text-indent:20px; 首行缩进

  • text-decoration:none;

  • 文本线(none/underline/overline/line-through) underline/overline/line-through; 定义文本上的下划线/上划线/中划线

  • letter-spacing: 字间距

9.列表

  • list-style-type       设置列表项标记的类型。参阅：list-style-type 中可能的值。

  • list-style-position       设置在何处放置列表项标记。参阅：list-style-position 中可能的值。

  • list-style-image       使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。

  • inherit       规定应该从父元素继承 list-style 属性的值

 

  •         disc: 点

  •         circle: 圆圈

  •         square: 正方形

  •         decimal: 数字

  •         decimal-leading-zero: 十进制数，不足两位的补齐前导0

  •         lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, ...

  •         upper-roman: 大写罗马文字，例如: I, II, III, IV, V, ...

  •         lower-greek: 小写希腊字母，例如: α(alpha), β(beta), γ(gamma), ...

  •         lower-latin: 小写拉丁文，例如: a, b, c, ... z

  •         upper-latin: 大写拉丁文，例如: A, B, C, ... Z

  •         armenian: 亚美尼亚数字

  •         georgian: 乔治亚数字，例如: an, ban, gan, ..., he, tan, in, in-an, ...

  •         lower-alpha: 小写拉丁文，例如: a, b, c, ... z

  •         upper-alpha: 大写拉丁文，例如: A, B, C, ... Z

  •         none: 无(取消所有的list样式)

  •         inherit:继承

10.超链接

  • a{text-decoration: none;}

  • a:link {color:#FF0000;} /* 未访问的链接 */

  • a:visited {color:#00FF00;} /* 已访问的链接 */

  • a:hover {color:#FF00FF;} /* 鼠标划过链接 */

  • a:active {color:#0000FF;} /* 已选中的链接 */

11.盒子模型（核心）

image.png

  • 盒子模型的组成部分

    • 外边距（margin）

    • 边框（border）

    • 内边距（padding）

    • 内容（content）

 

  • 边距

    • 自身的身高 width height 

    • 内边距 padding

    • 盒子边框 border

    • 与其他盒子的距离 margin 外边距

 

12.Border 边框

常见的写法 border:1px solid #foo;

单独属性:

  • border-widh:

  • border-style:

  • dotted 点状虚线

  • dashed（虚线）

  • solid（实线）

  • double（双实线）

  • border-color(颜色)

 

12.1.margin padding

  • padding:内边距

       值：像素/厘米等长度单位、百分比

    • padding:10px; 上下左右

    • padding:10px 10px; 上下 左右

    • padding:10px 10px 10px; 上 左右 下

    • padding:10px 10px 10px 10px; 上 右 下 左（设置4个点-->顺时针方向）

  • 单独属性

    • padding-top:

    • padding-right:

    • padding-bottom:

    • padding-left 

 

/*当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小*/

  • margin 外边距       

    • 值：与padding相同

    • 单独属性：与padding相同

    • 外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

  • margin

  • margin:10px  上下左右都会腾出10px出来

  • margin:0px auto; 居中

 

13.float  脱离文档流浮动（进阶）

image.png

  • left  元素向左浮动。

  • right 元素向右浮动

  • 清除浮动

    • clear: both;

    • left

    • right

14.块级元素、行内元素（进阶）

  • 块级元素：

    • 他会独占一行，在默认情况下，其宽度自动填满其父元素的宽度；

    • 块级元素可以设置width、height属性；

    • 块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性；

  • 行内元素：

    • 行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；

    • 行内元素的width、height属性则无效；

    • 行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。

  • 行内元素转换

    • display:none; 不显示

    • display:block;变成块级元素

    • display:inline; 变成行内元素

    • display:inline-block;以块级元素样式展示，以行级元素样式排列

  • 块级元素(block element）

    • address 地址

    • center 举中对齐块

    • div- 常用块级容易

    • dl 定义列表

    • form 交互表单 （只能用来容纳其它块元素）

    • h标签

    • hr 水平分隔线

    • ol 有序列表

    • ul 无序列表

    • p 段落

    • pre 格式化文本

 

  • 行内元素：

    • a - 锚点

    • b - 粗体(不推荐)

    • br- 换行

    • code - 计算机代码(在引用源码的时候需要)

    • em - 强调

    • i - 斜体

    • img - 图片（特殊的内联元素，同时是内联替换元素，替换元素可以设置宽高）

/*当图片和DIV在一起时，图片周围会出现margin现象，即元素不重合贴在一起，*//*为了解决这个问题，设置img的css为{margin：0；display：block；border：0px}*/

    • input - 输入框

    • label - 表格标签

    • select - 项目选择

    • strong - 粗体强调

    • textarea - 多行文本输入框

    • u - 下划线

    • var - 定义变量

    文章作者：锁爱一生
    文章标题：大学生快速掌握HTML5+CSS
    文章链接：https://xatirler.cn/?post=73
    本站所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明来自锁爱一生 ！

    📚 推荐阅读


    100条常用SQL语句

    windows电脑 CMD 常用命令
    评 论
    请登录后再评论
    立即登录 ｜ 注册帐号