侧边栏壁纸
博主头像
LYMTICS

海纳百川,有容乃大

  • 累计撰写 45 篇文章
  • 累计创建 37 个标签
  • 累计收到 19 条评论

目 录CONTENT

文章目录

HTML CSS 学习

LYMTICS
2020-06-12 / 0 评论 / 0 点赞 / 34 阅读 / 7,935 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-12,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

HTML CSS

HTML基础

基础结构

<!DOCTYPE html>			<!--文件符合html5标准-->
<html lang="en">		<!--lang属性:提供给搜索引擎网页语言: en英文, zh中文-->
    <head>
        <meta charset = "UTF-8">	<!--meta: 元数据: 可以带有关键字等信息-->
        <titile>					<!--charset: 字符集编码方式-->
        </titile>
    </head>
    
    <body>				<!--主题标签-->
    </body>
</html>

标签

<!--标题-->
<h1>一级标题 Heading 1 </h1>
<h6>六级标题 Heading 6 </h6>		<!--建议一个页面只有一个一级标题-->

<!--段落-->
<p>这是第一段</p>
<p>这是第二段</p>

<!--换行-->
<br/>				<!--浏览器会将多个空格或空行解读为一个空格-->

<!--空格字符-->
&nbsp;

<!--预留格式pre-->
<pre>
这是预留格式文本.   a啊a			<!--保留原格式, 包括空格换行-->
</pre>

<!--行内组合-->
<span></span>				<!--组合行内元素, 以便通过CSS样式来格式化-->

<!--水平线-->
<hr/>

<!--超链接-->
<a href = "news.html">图片或文字</a>
<a href = "https://www.baidu.com">baidu</a>
<a href = "#">待定</a>
<a href = "#" target = "_blank">新窗口打开</a>

<!--插入图像-->
<img title = "鼠标移动上去的提示" src = "Local.gif" alt = "无法显示" width="100px"/> 		<!--相对路径, 绝对路径>

<!--区域-->
<div align="center" id = "container">
    <h1>行昂</h1>
</div>

<!--列表unordered list-->
<ul>
    <p>无序列表</p>
</ul>
<ol>
    <li>HTML</li>
    <li>CSS</li>
</ol>

<!--表格-->
<table border = "1">
    <tr>
        <th>表头</th>
        <th>表头</th>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
</table>


<!--表单-->
<form>
    账户:<input type="text" name="userName" /><br />
    密码:<input type="password" name = "password" /><br />
    <input type = "submit" value="提交" name="submit" /><br />
    <input type = "reset" value = "重置" /><br />
</form>

<form>
    性别:
    男 <input type = "radio" value = "boy" name = "gender" checked="checked"/>
    女 <input type = "radio" value = "girl" name = "gender"/>
    <br />
    爱好:
    <input type = "ckeckbox" value = "1" name = "music" checked="checked"/>音乐
    <input type = "ckeckbox" value = "2" name = "sport" />体育
    <input type = "ckeckbox" value = "3" name = "read" />阅读
</form>

<!--下拉列表框-->
<form>
    <select>
        <option>选项1</option>
        <option select = "selected" >选项2</option>
    </select>
</form>

<!--文本框-->
<form>
    个人简介: <br>
	<textarea cols="50" rows="10">
		在这里输入内容...
	</ textarea>
	<br />
	<input type= " submit" value=" 确定"/>
    <input type=" reset"value="重置/>

</form>

web语义化

<em>斜体</em>
<i>斜体</i>
<strong>粗体</strong>
<b>粗体</b>

<dl>
   <dt>
       <dd>哈哈</dd>
   </dt>
</dl>

CSS样式

CSS添加方法

<!DOCTYPE HTML>
<html>
    <head>
        <style type = "text/css">
            h1{
                color:red;		/*这是添加注释的第一种方法--内嵌样式*/
            }
        </style>
    </head>
    
    <body>
        <h1>
            这是一级标题
        </h1>
        <p style = "color:red;">
            这是添加CSS的第一种方法 -- 行内添加
        </p>
    </body>
</html>

外部样式表

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    ...
</html>
p{
    font-size:12px;
    color:blue;
    font-weight:bold;
}

优先级

就近原则

行内样式>内嵌样式>链接样式>浏览器默认样式

CSS选择器

/*类型一: 标签*/
p{
    font-size:12px;
}

/*类型二: 类别*/
.one{
    color:red;		/*html文件中应有: class = "one"*/
}

/*类型三: id*/
#left{
    font-weight:bold;	/*html文件中应有: id = "left" */
}

/*类型四: 嵌套*/
p span{
    font-size:12px;
}

/*类型五: 集体*/
p,h1{
    color:red;
}

/*类型六: 全局*/
*{
    text-alligin:center;
}
  • 多个选择器混用, 用空格分开
  • id可以和class混用, 但是id选择器不可以多个同时使用.

单位

单位 描述
px 像素
em 字符
% 百分比, 自动继承父类

颜色

颜色 描述
颜色字符串 red, green
RGB(0-255或百分比值) (100%, 0,0) (244, 24, 42)
rgba a值: 透明度(0.0完全透明–1.0完全不透明)
#rrggbb 十六进制数

文本样式

属性 描述 取值
color 文本颜色
letter-spacing 字符间距 2px, -3px
line-height 行高 14px, 1.5em, 150%
text-align 对齐 center left right justify
text-decoration 装饰线 none overline underline line-through
text-indent 首行缩进 2em

字体样式

属性 描述 示例
font 在一个声明中设置所有的字体属性 font:bold, 18px, ‘幼圆’
font-family 字体系列 网页安全字体
font-size 字号
font-style 斜体
font-weight 粗体

font的顺序: 斜体 粗体 字号/行号 字体;

背景

p{
    background-color:red;
    background-image:url("logo.jpg");
    background-repeat:repeat;	/*默认填充*/
    background: red url("logo.jpg")
}

backgroud-repeat: repeat repeat-x repeat-y no-repeat

超链接

类型 描述
a 所有
a:link
a:visited
a:hover
a:active

以上就是一般顺序

a:link{
    text-decoration:none;
}

列表

无序列表ul和有序列表ol共用样式

属性 描述
list-style 所有用于列表属性的设置于一个声明中
list-style-image 为列表项标志设置图像
list-style-position 标志的位置
list-style-type 标志的类型
  • list-style-type:
描述
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
  • list-style-position:

    描述
    inside
    outside

表格

描述
width 宽度
height 高度
border 边框:1px solid #eee;
border-collapse 合并

奇偶选择器

tr:nth-child(odd/even)

odd: 偶数

even: 奇数

CSS布局

盒子模型

content 内容

属性 描述
height 高度
width 宽度
border 边框
padding 内边距
margin 外边距
8#one{
    margin:1px;		/*上下左右都是1px*/
    margin:1px 2px 3px 4px;	/*上下左右*/
    margin:1px 2px;	/*等效:1px 2px 1px 2px*/
    margin-left:1px;
    margin: 0 auto;/*水平居中*/
}
/*margin的合并: 垂直方向上谁多是谁*/
/*div默认会换行*/

属性

属性 描述
hidden 超出部分不可见
scroll 超出部分以滚动条
auto 自动显示

border属性

属性 描述
border-width px,thin,medium,thick
border-style dashed,dotted,solid,double
border-color 颜色
border width style color
  • 可以用来做水平分割线

CSS定位机制

文档流flow, 浮动float, 层layer

flow

元素分类: block, inline, inline-block

元素类型转换: display属性

元素 特点 常见类型
block 1.独占一行
2.元素的height, width, margin, padding都可以设置

      inline 1.不单独占用一行
      2.width, height不可设置
      3.width就是他包含文字或图片的宽度,不可改变
      4.默认有间隙
      inline-block 1.不单独占用一行
      2.元素的height, width, margin, padding都可以设置
      a{
          display:none;	/*元素不被显示出来*/
          display:block;
          display:inline;
          display:inline-block;
      }
      

      float

      float:left, right ,none;

      div{
          float:left/right/none;
          clear:left/right/both;
      }
      
      

      layer

      position 解释
      static(default) 没有定位,属性无效
      fixed: 固定定位 相对于浏览器窗口定位
      relative: 相对定位 相对父元素定位;在原文档中的位置依然存在
      absolute: 绝对定位 相对于static定位外的第一个父元素定位
      fix-box{
          position:fixed/relative/absolute;
          left:100px;
          right:50px;
          top:100px;
          bottom:200px;
          z-index:1;	/*显示顺序*/
      }
      

      CSS3效果

      浏览器支持

      加前缀

      浏览器内涵 浏览器 CSS3前缀
      Webkit Safari, Chrome -webkit-
      Gecko Firefox -moz-
      Presto Opera -o-
      Trident IE -ms-

      border-radius

      div{
          border-top-left-radius:10px 10px;
          border-top-right:10px;
          border-radius:25px;
      }
      

      box-shadow

      p{
          box-shadow:inset 10px 10px 5px #888;
      }
      

      inset\outset(默认)

      偏移横, 偏移竖, 模糊, 颜色

      text-shadow

      水平偏移, 垂直偏移, 阴影大小, 颜色

      h1{
          text-shadow: 0 0 3px #F00; /*描边效果*/
          
          text-shadow: 2px 2px 4px #000; /*浮雕的效果*/
      }
      

      word-wrap

      p{
          word-wrap: break-word;
          word-word: normal;
      }
      

      @font-face 规则

      不同浏览器支持字体的格式不同

      @font-face{
          font-family: haha;
          src:url('fonts/hahaha.ttf')
              url('fonts/hahaha.svg')
      }
      
      p{
          font-family:haha;
      }
      

      2D转换

      对元素进行旋转, 缩放, 移动, 拉伸

      p{
          transform:rotate(30deg);	/*旋转*/
          transform:scale(1,2);		/*缩放,表示倍数*/
      }
      

      过度

      /*过渡: 将元素的某个属性从一个值在指定的时间内过渡到另一个值*/
      p{
          transation: 属性名 持续时间 过度方法;
          transition-property: 属性名|all ;
          transition-duration: 持续时间(s);
          transition-timing-function: 过渡使用的方法(函数);
      }
      

      transition-timing-function取值

      描述
      linear 匀速
      ease 慢快慢
      ease-in 慢快
      ease-out 快慢
      ease-in-out 慢快慢

      动画

      1. 定义动画 @keyframes
      2. 调用动画
      @keyframes mycolor
      {
          0% {background-color:red;}
          30% {background-color:blue;}
          60%	{background-color:yellow;}
          100% {background-color:green;}
      }
      
      div:hover
      {
          animation: mycolor 5s linear;
      }
      

      animation属性取值

      描述
      animation 简写
      animation-name
      animation-duration
      animation-timing-function 默认是"ease"
      animation-play-state running|paused

      3D变换

      #stage{
          perspective:100px;
          width:100px;
          height:100px;
      }
      
      .box{
          width:20px;
          height:20px;
          float:left;
          transition: linear 1s;
          transform-style: preserve-3d;
          transform: rotateY(60deg);
      }
      

0

评论区