by ·0评论

初识CCS

1、什么是CSS

2、CSS语法

3、CSS样式表

4、选择器

5、字体属性

6、文本属性

 

1、什么是CSS

CSS 全称：Cascading Style Sheet(层叠样式表)，又称为风格样式表(Style Sheet)

2、CSS语法

1、CSS规则由两部分构成，选择器+声明
2、声明必须放在一对{}中，可以声明一条或是多条
3、每条声明由 属性+值组成,每条语句用 ； 隔开

示例：


ccs的基本语法

3、CSS样式表

CSS样式表分为：1、行内样式   2、内部样式    3、外部样式

1、行内样式

行内样式：直接写在标签内部：

2、内部样式

内部样式：写在head中的style元素中的样式

3、外部样式

外部样式：在文件下新建一个后缀为.css的文件，将样式写在css文件中，使用 链接式 或者 导入式@import

链接式：

先加载样式，再编译显示，网速不影响显示效果
示例：

关键词:link

rel:链接内容的格式
type:类型
href:地址

注：link除了可以链接样式，还可以链接图片，用于网页的头标
示例：

效果：

代码：

 

导入式：

先显示HTML内容，再加样式，受网速影响
用法：放在style中

4、样式优先级


就近原则(离元素/标签近)

行内样式最高
内部样式，外部样式看代码的执行顺序，后面的会把前面的顶掉

注：link 和 sytle 不只可以写在head中，body中也可以写


 

4、选择器

选择器分为：元素选择器 类选择器 ID选择器

 

元素选择器


 

类选择器


 

ID选择器


 

选择器优先级


ID>类选择器>标签(元素选择器)

 

5、字体属性

font-family 字体类型
设置多个字体

注：如果想设置中文，英文不同字体，应该把兼容性低的放第一个

font-size 字体大小

font-style 字体风格

font-weight 字体粗细

font 在一个声明中写所有属性：font:font-style,font-weight,font-size,font-family;

 

6、文本属性

color 设置文本颜色

text-align 设置文本水平对齐方式

text-align 设置文本首行缩进

line-height 设置文本行高

text-decoration 设置文本装饰（下划线之类）

vertical-align 设置元素的垂直对齐方式


color是文本属性，不是字体属性

by ·0评论

需要掌握的技术：
1.HTML的作用
2.块级元素
3.行级元素

什么是HTML
超文本标记语言
HTML：网页源码
浏览器：解析和执行HTML源码的工具

W3C标准
万维网联盟
负责制定和维护web行业的标准
HTML内容：XHTML
美化：CSS
文档访问方面：OM
页面交互：ECMAScript

基本结构：
基本结构

两部分：head，body
head：头部部分
body：网页的内容

网页元素：
title：网页标题

网页摘要信息-1：
网页摘要

title
meta:当前页面使用什么编码
meta content description & meta name keywords：描述关键字或者信息方便搜索

命名习惯：
短横线命名法：
xx-xxx

HTML元素分类：
块级元素：做布局（块级元素里面包括行级元素）
标题标签：

<

h1>~

<

h6>
h级标签

段落标签：

水平线：

（单个闭合标签）

无序列表：

    ，里面加上

  • （一般用于新闻、活动、论坛）
    特性：
    1.没有顺序，每个

  • 元素占一行
    2.默认

  • 元素项前面有个实心小圆点
    3.一般用于无序类型的列表，入导航、边栏新闻、有规律的图文组合模块等

    有序列表：

      （一般用于排行榜）
      特性：
      1.有顺序，每个

    1. 元素独占一行
      2.默认

    2. 元素前面有个顺序标记
      3.一般用于排序类型的列表，如试卷、问卷等

      定义描述列表：

      标题

      第X项

      （用法，dd解释前面的标题）
      特性：
      1.没有顺序，每个

      元素、

      元素独占一行
      2.默认没有标记
      3.一般用于一个标题下面有一个或多个列表项的情况

      分区元素：

      （可以装任何标签）

      行级元素：做内容（包括文字、图片等）ps.行内元素默认设置宽高无效,图片例外

      字体加粗：字体加粗

      字体倾斜：字体倾斜

      换行标签：
      （默认换行使用）

      图像元素：“图片替代文字”（当图片不存在的时候显示的提示文字）

      超链接：xx（打开其他页面），锚记效果xx
      超链接的应用场合：
      1.面间链接：A页到B页，网站导航
      2.锚链接：A页甲位置到A页乙位置或A页甲位置到B页乙位置
      功能性链接：在页面中调用其他程序功能，比如QQ、MSN等

      行级范围标标签：内容

      删除标签：在原来标签上面画一条线

      特殊符号：
      空格： 
      大于号（>）：>
      小于号（<）：<
      引号（“）："
      版权符号（©）©

      3. by ·0评论

      javaScript：一种解释性语言，也称为脚本语言。语法和java类似，程序必须在客户端执行。它主要作用是实现网页中的表单验证和网页特效。

      javaScript组成：ECMAScript（脚本语言规范）、DOM（浏览器对象模型）、BOM（文档对象模型）。

      日志打印语法：console.log(meessage)

      javaScript的变量：命名规则和JAVA一样，变量名区分大小写。语法用var和let来声明变量，但let声明的变量只能在它所在的代码块有效，必须在先声明后使用。

      常量const，值不能更改，声明的时候必须赋值，和let一样只能在自己所在的代码块有效，不会变量提升。

      javaScript基本数据类型：String、Number、boolean
      javaScript引用数据类型：Array、Object
      javaScript特殊类型null、undefined

      javaScript中的运算符与java的运算符，类型和用法基本一致，多了两个”===”和”！==”。它们于”==”和”！=”的作用一样。区别在于后者比较时会自动转换数据类型，而前者不会自动转换，只要数据类型不匹配就会返回false。

      判断数据类型的语法：typeof（变量或值）；

      by ·0评论

      html5是html语言的一种规范版本，实现了“一次编写，可在各处运行”，减少了开发人员的工作量。

      H5新增元素

      语义化元素

      语义化元素均为块级元素，本身没有实际功能，但会方便开发人员划分网页结构，即通过标签名称本身即可区分网页元素功能。

      <header> 标题头部，指整个页面头部或一个页面区域中的头部
      <footer>底部区域，指整个页面底部或一个页面区域的底部
      <section>页面的一块独立区域，其内部布局以自身为参照
      <article>独立的文章内容，通常含有大量文字以及文本排布相关标签
      <aside>相关内容或应用，常用于指代侧边栏，起辅助功能
      <nav> 导航类辅助内容，常用于指代菜单

      元素排布

          <header>
        <nav></nav>   
    </header>
    <div>
        <aside></aside>
        <section></section>
        <aside></aside>
    </div>

      多媒体元素

      音频元素


      <audio src="音频路径" controls="controls"></audio>
      src表示的音频路径可通过标签内插入source标签代替
      controls=“controls” 属性提供音频控件，包括播放、暂停和音量控制。
      autoplay 属性提供自动播放功能
      loop 属性提供循环播放功能
      在audio标签之间插入文字，可用于在不支持该标签的浏览器的显示文字提醒用户。
      主流浏览器中对于引入的音频格式主要包括ogg mp3和wav,不同浏览器有所区别，所以标准情况会准备三个格式文件方便兼容。
      可用写法如下：

      <audio controls autoplay loop>
    <source src="路径1/文件.mp3"/>
    <source src="路径2/文件.ogg"/>
    <source src="路径3/文件.wav"/>
    你的浏览器不支持audio元素
</audio>

      视频元素


      <video src="视频路径" controls="controls"></video>
      格式类似音频元素，不做赘述。
      主流浏览器中对于引入的视频格式主要包括OGG MP4和WEBM。

      画布元素

      在该元素内可通过JavaScript语言完成图形绘制，实现一些酷炫的本地动态效果。
      在body标签内书写如下代码

      <canvas id="canvas" width="500" height="400" style="background-color: red;"></canvas>
<script>
var canvas = document.querySelector("#canvas");
var g = canvas.getContext('2d');
g.fillStyle = "#F98734";
g.fillRect(0, 0, 100, 100);
// 起点
g.moveTo(100,100);
// 终点
g.lineTo(300, 400);
g.stroke();
console.log(g);
</script>

      绘制效果如图

      数据元素

      用于定义选项列表，与input标签搭配食用，可以定义input可能的取值。
      使用户在选择的同时能够自由编辑，比如带有提示功能的输入框，或者类似搜索记录/根据输入猜测完整词汇时。
      书写方式如下

      <input type="text" list="XXX">
<datalist id="XXX">
    <option>提示项1</option>
    <option>提示项2</option>
    <option>提示项3</option>
</datalist>

      by ·0评论

      文字阴影效果（text-shadow）

      text-shadow：阴影水平偏移值px 阴影水平偏移值px 模糊值px 阴影颜色；
      text-shadow：阴影水平偏移值px 阴影水平偏移值px 模糊值px 阴影颜色；text-shadow：阴影水平偏移值px 阴影水平偏移值px 模糊值px 阴影颜色；
      注意：当要设定多个阴影时，可用逗号隔开，分别输入阴影样式，最后一个用；结束。阴影的水平和垂直值可用负数表示。注意：当要设定多个阴影时，可用逗号隔开，分别输入阴影样式，最后一个用；结束。阴影的水平和垂直值可用负数表示。

      边框圆角效果（border-radius）

      border-radius：左上弧度px 右上弧度px 左下弧度px 右下弧度px；
      注意：参数可填写一个至四个，若一个参数则数值作用四个角，若参数两个值则第一数值作用左上右下、第二数值作用右上坐下。

      盒子阴影效果

      box-shadow：阴影水平偏移值px 阴影水平偏移值px 模糊值px 阴影颜色 inset;
      inset属性—内阴影
      注意：写上inset则为设置盒子内阴影，如果不写则为设置盒子外阴影，其余参数注意事项与文字阴影效果相同。

      背景图像

      background-size：——–用于设置背景图像大小
      background-repeat: no-repeat;—图像不平铺在盒子里
      background-position: center;—图像在盒子中居中
      background-clip：—设定图像向外裁剪的区域
      待测试浏览器:-webkit-谷歌,-moz-火狐,-ms-微软,-o-
      注意：size的值有四种，默认参数为auto，cover按容器宽高的最大值等比例缩放，Contain:背景图按照容器的宽高最小值等比例缩放，直接填写数值则分别对应宽高的大小（单位为px）。

      背景颜色渐变（gradient）

      linear-gradient—线性渐变
      radial-gradient—径向渐变
      background中的属性—background:linear-gradient();
      括号中的填写方式为：（渐变角度deg，颜色，颜色·······）；
      注意：颜色后可接百分数，意思为颜色所占的百分比。

      过渡属性 (transition)

      transition：属性取值(一般用all) 过渡时间 过渡动画函数 过渡延迟时间；
      transition-property：属性取值(一般用all)
      transition-duration：过渡时间
      transition-timing-function：过渡动画函数
      ease:过渡速度由快到慢，逐渐变慢（默认效果）
linear：过渡速度为恒速（匀速效果）
ease-in：过渡速度为越来越快（渐显效果）
ease-out：过渡速度为越来越慢（渐隐效果）
ease-in-out：过渡速度为先加速再减速（渐显渐隐效果）
      transition-delay：过渡延迟时间
      过渡的触发机制：利用伪类： :hover,:active,:focus,:cheked等
      注意：时间的单位都为s，delay的单位可为负值。****

      2D变换属性（transform）

      transform: translate(X轴值px, Y轴值px);—-2D位移变换
      transform: scale(X轴值px, Y轴值px)；——–2D缩放变换
      transform: rotate(角度值deg)；—————2D旋转变换

      by ·0评论

      一般来说我们在网页中使用使用某一个元素的时候都会牵涉到该元素在网页中的位置问题，而这也往往让我们相当头疼。
      当你创建了一个元素，position默认为static：此时元素没有定位，按照标准文档流进行布局；
      当position设置为relative时，元素定位为相对定位，即相对于自身原来所在的标准位置进行定位，元素仍然在标准文档流中。
      当将元素定位设置为absolute，如下图所示：

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position的设置演示</title>
        <style type="text/css">
            div{
                border:1px solid red;
            }
            .out-div{
                width: 200px;
                height: 200px;
                position:relative;
            }
            .iner-div{
                width: 50%;
                height: 50%;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div class="out-div">
            <div class="iner-div">二级元素</div>
        </div>
    </body>
</html>

      这个时候“二级元素”的定位设置为absolute，它首先会查找上级元素有没有定位，如果有定位设置则相对于上级元素的位置进行定位，如果上级元素为默认设置static则相对于body定位，注意这种定位方式元素不在标准文档流中。
      当将元素的position设置为fixed时，元素也已经不在标准文档流中，此时元素的定位是相对于浏览器的窗口来进行定位，也就是元素会固定在窗口的某一位置，不管窗口如何滚动都会在窗口中展示。

      by ·0评论

      什么是动画？

      动画（animation）和transition实现动画类似，都是通过改变元素属性实现动画效果

      两者区别：

      • transition通过指定属性的初始结束状态进行平滑过渡实现动画效果，transition实现动画的前提是需要触发事件（如hover，focus等）
      • animation通过声明动画，调节属性中的关键帧实现更负责的动画效果，animation既能在不触发事情情况下实现动画，也能由事件触发

      动画的使用过程：

      设置关键帧@keyframes
      常用语法：

      @keyframes 动画名 {
    0%{ 
        CSS样式; 
    }
    100%{ 
        CSS样式; 
    }
}

      调用关键帧
      语法示例：

      div:hover{
    /* 对应的六个参数分别是：动画名称 动画时长 过渡方式/效果 延迟时间 循环次数 是否反向 */
    animation: name 3s linear 0s infinite alternate;
}

      媒体查询

      媒体查询可以根据设备显示器的特征（屏幕长宽，显示方向横向或纵向等）进行判断选择后在不同设备显示不同效果

      语法：@media 媒体类型 and ( 媒体特性) {样式}
      针对不同的媒体使用不同的样式：

      <link rel="stylesheet" media="媒体类型 and ( 媒体特性)" href="stylesheet.css">

      常用的媒体特性：

      属性
      min-width 最小宽度
      max-width 最大宽度
      min-height 最小高度
      max-height 最大高度

      by ·0评论

      一、超链接的伪类样式

      • 语法结构
      a:hover{
    color:#f00;
}
      • 优先级有先后顺序

        :link(未访问过的样式)>:visited(访问过的样式)>:focus(获得光标使用的样式)>:hover(鼠标悬停的样式)>:active(激活状态使用的样式)

      • hover 和 active对所有元素适用

      • link、visited只对超链接适用。

      二、列表样式

      • list-style-type
      • list-style-image
      • list-style-position
      • list-style:(type position image)
        • 一般只用list-style: none;

      三、尺寸属性

      • width
        • 最大最小固定宽度一般用于页面布局才有效
        • 固定宽度
      .w-200 {
width:200px;
background-color: red;
}
      • 最大宽度
      .w-max-200 {
background-color: blue;
width: auto;
max-width:200px;
}
      • 最小宽度

      适配不同分辨率，在横向滚动条出现之前可显示有效内容的尺寸 

      .w-min-200 {
background-color: green;
width: auto;
min-width:200px;
}
      • height
        • 同理

      四、盒子模型

      属性值作用位置

      只有一个值：所有边框

      第一个值：上下；第二个值：左右

      第一个值：上；第二个值：左右；第三个值：下

      第一个值：上；第二个值：右；第三个值：下；第四个值：左；（顺时针）

      1. 边框(border)

      • 边框颜色（border-color）
      • border-top-color
      • border-bottom-color
      • border-left-color
      • border-right-color
      • 一般用下面这种设置方式：

      只有一个值：四边框 

      border-color: red；

      第一个值：上下；第二个值：左右 

      border-color: red blue;

      第一个值：上；第二个值：左右；第三个值：下 

      border-color: red blue green;

      第一个值：上；第二个值：右；第三个值：下；第四个值：左；（顺时针） 

      border-color: red blue green gray;
      • 边框宽度（border-width）

      只有一个值：四边框

      • border-width:10px;

      第一个值：上下；第二个值：左右

      • border-width:10px,20px;

      第一个值：上；第二个值：左右；第三个值：下

      • border-width:10px,20px,30px;

      第一个值：上；第二个值：右；第三个值：下；第四个值：左；（顺时针）

      • border-width:10px,20px,30px,40px;
      • 边框风格(border-style)
        • solid (实线)
        • dotted(圆点)
        • dashed(虚线)
        • double(双实线)
      • 复合简写方式
      border: 1px[宽度] solid[样式] #333333[颜色] ;

      2.外边距(margin)

      上下边界距离会合并为最大的距离

      子容器的外边距会传递给父容器，如果想实现外边距，需要给父容器设边框，但是有边框，设成透明也会占用像素 推荐使用 padding

      3.充满页面

      方法一：html body无留白充满:

      *body默认有外边距，所以也要设body**的父类的高度* 

      html{
height: 100%;
}
body{

height: 100%;
}

      方法二：直接设body外边距为0：

      body{
margin:0；
padding:0;
}
      • 水平居中
      margin-left：auto；
margin-right：auto；

      ​ 简写：

      margin:0 auto;

      4.内边距（padding）

      控制内容排布时，能用padding就不要用margin

      5. 盒子模型的宽高计算（box-sizing）

      盒子的总宽度=内容的宽度+左边框宽度+右边框宽度+左内边距+右内边距

      盒子的总高度=内容的高度+左边框高度+右边框高度+上内边距+下内边距

      • 默认内容盒子
      box-sizing: content-box;
      • 包括了边框+内边距+内容
      box-sizing: border-box;
      • 使用通配符设置内容盒子
      *{
box-sizing: border-box;
}

      6.背景属性

      • 背景平铺

      默认是平铺repeat

      //非平铺（单张） 

      background-repeat: no-repeat;

      //x轴平铺一行 

      background-repeat: repeat-x;

      //y轴平铺一行 

      background-repeat: repeat-y;
      • 背景位置

      //居中 

      background-position:center;

      //左上角 

      background-position:left top;

      //右下角 

      background-position:right bottom;
      • 复合简写方式
      background: red[颜色] url(img/0.png)[图片] center[位置] no-repeat[平铺方式];