淘先锋技术网

首页 1 2 3 4 5 6 7

一、初始CSS

1.CSS

  • Cascading Style Sheet 层叠样式表。
  • 表现HTML或XHTML文件样式的计算机语言。
  • 优势:
    • 内容与表现分离,网页的表现统一,容易修改。
    • 丰富的样式,使得页面布局更加灵活。
    • 运用独立于页面的CSS,有利于网页被搜索引擎收录。
    • 减少网页的代码量,增加网页的浏览速度,节省网络带宽。

2.CSS基本语法

  • 语法:
选择器{
    声明1;
    声明2;
}
  • style标签:CSS样式在HTML中应用的标签。

3.引入CSS方式

  • 行内样式:在标签元素中,编写一个style属性,编写样式即可,由于这种方式不能起到内容与表现相分离,因此不推荐使用。
<h1 style="color: blue">我是标题</h1>
  • 内部样式:方便在同页面中修改样式,不利于在多页面间共享复用代码及维护。
<style>
    h1{color: red;}
</style>
  • 外部样式:CSS代码保存在扩展名为.css的样式表中,HTML文件引用扩展名为.css的样式表,有俩种方式。

    • 链接式:使用 link 标签链接外部样式表,link 标签必须放在 head 标签中。

    • 客户端浏览网页时先将外部CSS文件加载到网页当中,然后再进行编译显示,所以这种情况下显示出来的网页与用户预期的效果一样。

      <link rel="stylesheet" href="css/style.css">
      
    • 导入式:使用@import导入外部样式表。

    • 客户端在浏览网页时先将HTML结构呈现出来,再把外部CSS文件加载到网页当中,当网速较慢时会先显示没有CSS统一布局的HTML网页。

      <style>@import url("css/style.css");</style>
      
  • 优先级:就近原则,越接近标签的样式优先级越高。


4.CSS基本选择器

  • 标签选择器:HTML标签作为选择器的名称。
  • 类选择器:.class的名称{},好处:可以多个标签归类,是同一个class,可以复用。
  • ID选择器:#id名称{} : id必须保证全局唯一!
  • 优先级:id 选择器>class 选择器>标签选择器

5.CSS高级选择器

1.层次选择器

  • 后代选择器:某个元素的后面。
  • 子选择器:一代,儿子。
  • 相邻兄弟选择器:只有一个,相邻(向下)。
  • 统通用兄弟选择器:当前选中元素向下的所有兄弟元素。
/*1.后代选择器:某个元素的后面*/
body p{
    background: #158616;
}

/*2.子选择器:一代,儿子*/
body>p{
    background: #158616;
}

/*3.相邻兄弟选择器:只有一个,相邻(向下)*/
.active + p{
    background: #158616;
}

/*4.通用兄弟选择器:当前选中元素向下的所有兄弟元素*/
.active~p{
    background: #158616;
}

2.结构伪类选择器

/*ul的第一个子元素*/
ul li:first-child{
    background: red;
}

/*ul的最后一个子元素*/
ul li:last-child{
    background: green;
}

/*选中p1:定位到父元素,选择当前的第二个元素
选择当前p元素的父级元素,选择父级元素的第二个元素,并且是当前元素才生效,按顺序
*/
p:nth-child(2){
    background: blue;
}

/*选中父级元素,下的p元素的第二个,按类型*/
p:nth-of-type(2){
    background: pink;
}

3.属性选择器

= 绝对等于
*= 包含
^= 以什么开头
$= 以什么结尾

/*属性名,属性名 = 属性值(正值)
= 绝对等于
*= 包含
^= 以什么开头
$= 以什么结尾
*/

/*存在id属性元素      a[]{}*/
a[id]{
    background: yellow;
}

/*id=first的元素*/
a[id=first]{
    background: yellow;
}

/*class 中有links的元素*/
a[class*="links"]{
    background: yellow;
}

/*选中herf中以http开头的*/
a[href^=http]{
    background: yellow;
}

/*选中herf中以jpg结尾的*/
a[href$=com]{
    background: green;
}

二、美化网页元素

1.为什么使用CSS

  • 有效的传递页面信息 。
  • 使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户 。
  • 可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容。
  • 具有良好的用户体验。
  • < span>标签:能让某几个文字或者某个词语凸显出来,从而添加对应的样式!
<!--重点突出的字,用span套起来-->
做一名 <span id="title1">JAVA</span>工程师

2.字体样式

  • font-family:字体类型
    font-size:字体大小,单位:px、em。
    font-weight:字体粗细,lighter、normal(400)、bold(700)、bolder。
    color:字体颜色
    font-style: 字体风格,normal、italic和oblique(斜体)。
<style>
    body{
        font-family: "Arial",楷体;
        color: #865722;
    }
    h1{
        font-size:50px;
    }
    .p1{
        font-weight: bolder;
    }
</style>
  • 字体属性 font:字体属性的顺序:字体风格→字体粗细→字体大小→字体类型
<style>
    .p1{
        font: oblique 100 16px "楷体" ;
    }
</style>

3.文本样式

  • text-align: center; 排版:居中。
    text-indent: 2em; 段落首行缩进二字符。
    text-decoration: none; 去掉下划线,上中下划线,删除线。
  • height: 300px;
    line-height: 300px;
    行高 和 块 的高度一致,就可以上下居中。
  • vertical-align: middle; 文本图片水平对齐,参照物: a,b。
<!--
颜色:
    单词
    RGB 0~F
    RGBA A 0~1 透明度
-->
<style>
    h1{
        color: rgba(0,255,255,0.5);
        text-align: center;
    }
    .p1{
        text-indent: 2em;
    }
    .p3{
        background: blue;
        height: 300px;
        line-height: 300px;
    }

    /*下划线*/
    .l1{
        text-decoration: underline;
    }
    /*中划线*/
    .l2{
        text-decoration: line-through;
    }
    /*上划线*/
    .l3{
        text-decoration: overline;
    }
    /*超链接去掉下划线*/
    a{
        text-decoration: none;
    }
    /*文本图片水平对齐,参照物, a,b*/
     img,span{
         vertical-align: middle;
     }
</style>

4.文本阴影

  • text-shadow: 文本阴影(水平偏移,垂直偏移,阴影模糊半径,阴影颜色)

5.超链接伪类

  • a:hover{} 鼠标悬浮的状态
/*默认颜色*/
a{
    text-decoration: none;
    color: #000000;
}
/*鼠标悬浮的状态(只需要记住:hover)*/
a:hover{
    color: orange;
    font-size: 20px;
}
/*鼠标按住未释放的状态*/
a:active{
    color: #e01500;
}

6.列表样式

  • list-style:
    none:去掉圆点
    disc:实心圆,默认类型
    circlr:空心圆
    decimal:数字
    square:正方形

7.背景样式

  • background-image:背景图像
    background-color:背景颜色
    background-repeat:背景重复方式(沿x轴平铺,沿y轴平铺,不重复)
div{
    height: 700px;
    width: 1000px;
    border: 1px solid red;
    background-image: url("images/cs11dn.png");
    /*默认是全部平铺的 repeat*/
}
/*沿x轴平铺*/
.div1{
    background-repeat: repeat-x;
}
/*沿y轴平铺*/
.div2{
    background-repeat: repeat-y;
}
/*不重复 就一个*/
.div3{
    background-repeat: no-repeat;
}
  • 背景简写
/*颜色 图片 图片定位 背景不重复*/
background: red url("../images/d.png") 270px 10px no-repeat;

8.渐变样式

/*background-color: #00bcbf;*/
background-image: linear-gradient(117deg, #00bcbf 0%, #FC00FF 100%);

三、盒子模型

1.盒子模型

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。


2.边框border

  • 同时设置4个边框颜色时,顺序为上右下左(顺时针)。
/*body总有一个默认的外边距 要进行默认设置margin:0(常见操作)
body{
    margin: 0;
    padding: 0;
    text-decoration: none;
}*/

/*border:粗细,样式,颜色
    solid 实线
    dashed 虚线
*/
#box{
    width: 240px;
    border: 1px solid red;
}

3.内外边距 padding margin

  • 同时设置2个值时,顺序为上下、右左。
  • 同时设置4个值时,顺序为上右下左(顺时针)。
  • 内外边距同理。
/*
顺时针旋转
margin: 0
margin: 0 1px
margin: 0 1px 2px 3px
*/
h2{
    background: #0af8ff;
    font-size: 18px;
    color: white;
    line-height: 30px;
    text-align: center;
    margin: 0 1px 2px 3px;
}
  • 外边距的妙用,居中元素:margin: 0 auto;
  • 网页居中对齐的必要条件:块元素,固定宽度。
#box{
        width: 240px;
        border: 1px solid red;
        margin: 0 auto;
    }

4.盒子模型尺寸

  • 盒子模型总尺寸= border + padding + margin + 内容高度

5.圆角边框

  • border-radius:边框半径,左上,右上,右下,左下,顺时针方向。
  • 圆圈:圆角=半径(border-radius: 50%;)
div{
    height: 100px;
    width: 100px;
    border: 2px solid red;
    border-radius: 20px 10px 30px 40px;
}

6.盒子阴影

  • box-shadow:内阴影(阴影类型)、x轴位移、y轴位移、阴影模糊半径、阴影颜色。

四、浮动

1.标准文档流

  • 标准文档流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式。
  • 块级元素(block):< h1>…< h6>、< p>、< div>、列表
  • 内联元素(inline):< span>、< a>、< img>
  • 内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立。

2.display

  • bolck:元素显示为块级元素。
  • inline:元素显示为内联元素。
  • inline-block: 行内块元素,是块元素,还可以内联,在一行!(可以使块元素排在一行)
  • none:设置元素不会被显示。

3.浮动 float

  • left:左浮动,right:右浮动。(可以使块元素排在一行,会产生边框塌陷)

  • clear:清除浮动。


4.边框塌陷及解决方法

  • 设置父元素的高度
    • 简单,元素假定有了固定高度,就会被限制,降低扩展性。
#father{
    height: 250px;
    /*简单,元素假定有了固定高度,就会被限制*/
}
.div1{
    float: left;
}
.div2{
    float: left;
}
.div3{
    float: right;
}
.div4{
    float: right;
}
<div id="father" style="border: 1px black solid">
    <div class="div1" style="width: 100px;height: 100px;border: 1px dashed red">我是div1</div>
    <div class="div2" style="width: 100px;height: 100px;border: 1px dashed red">我是div2</div>
    <div class="div3" style="width: 100px;height: 100px;border: 1px dashed red">我是div3</div>
    <div class="div4" style="width: 100px;height: 100px;border: 1px dashed red">我是div4</div>
</div>
  • 父级添加overflow属性(溢出处理)
    • 简单,下拉列表框的场景不能使用。
/*简单,下拉列表框的场景不能使用*/
#father{
    overflow: hidden;
}
.div1{
    float: left;
}
.div2{
    float: left;
}
.div3{
    float: right;
}
.div4{
    float: right;
}
<div id="father" style="border: 1px black solid">
    <div class="div1" style="width: 100px;height: 100px;border: 1px dashed red">我是div1</div>
    <div class="div2" style="width: 100px;height: 100px;border: 1px dashed red">我是div2</div>
    <div class="div3" style="width: 100px;height: 100px;border: 1px dashed red">我是div3</div>
    <div class="div4" style="width: 100px;height: 100px;border: 1px dashed red">我是div4</div>
</div>
  • 浮动元素后面加空div
    • 简单,但是空div会造成HTML代码冗余,代码中尽量避免加空div。
#father{

}
.div1{
    float: left;
}
.div2{
    float: left;
}
.div3{
    float: right;
}
.div4{
    float: right;
}
/*简单,代码中尽量避免加空div*/
#clear{
    margin: 0;
    padding: 0;
    clear: both;
}
<div id="father" style="border: 1px black solid">
    <div class="div1" style="width: 100px;height: 100px;border: 1px dashed red">我是div1</div>
    <div class="div2" style="width: 100px;height: 100px;border: 1px dashed red">我是div2</div>
    <div class="div3" style="width: 100px;height: 100px;border: 1px dashed red">我是div3</div>
    <div class="div4" style="width: 100px;height: 100px;border: 1px dashed red">我是div4</div>
    <div id="clear"></div>
</div>
  • 父级添加伪类after(推荐)
    • 写法比前三个复杂,但是没有副作用,推荐使用。
#father{
}
/*写法复杂,但是没有副作用,推荐使用*/
#father:after{
    content:"";
    display: block;
    clear: both;
}
.div1{
    float: left;
}
.div2{
    float: left;
}
.div3{
    float: right;
}
.div4{
    float: right;
}
<div id="father" style="border: 1px black solid">
    <div class="div1" style="width: 100px;height: 100px;border: 1px dashed red">我是div1</div>
    <div class="div2" style="width: 100px;height: 100px;border: 1px dashed red">我是div2</div>
    <div class="div3" style="width: 100px;height: 100px;border: 1px dashed red">我是div3</div>
    <div class="div4" style="width: 100px;height: 100px;border: 1px dashed red">我是div4</div>
</div>

5.inline-block 和 float 区别

  • display: inline-block
    • 可以让元素排在一行,并且支持宽度和高度,代码实现起来方便。
    • 但是位置方向不可控制,会解析空格。
  • float
    • 可以让元素排在一行,并且支持宽度和高度,可以决定排列方向。
    • float 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父级上添加清除浮动的样式。

五、定位

1.定位在网页中的应用

  • 下拉菜单,不随滚动条移动的固定导航,鼠标移入弹出的消息框。

2.相对定位 relative

  • position: relative:相对定位,相对于自身原来的位置进行偏移。
  • 偏移设置:top、left、right、bottom,上左右下。
  • 设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响。
  • 层级提高,可以把标准文档流中的元素及浮动元素盖在下边
#first{
    background-color: #0af8ff;
    border: 1px dashed #d83a17;
    position: relative;/*相对定位:上下左右*/
    top: -20px;
}
#second{
    background-color: #ebff11;
    border: 1px dashed #e09344;
    position: relative;
    left: 20px;

3.绝对定位 absolute

  • position: relative:绝对定位,相对于它的定位父级的位置来定位,如果没有设置定位父级,则相对浏览器窗口来定位。
  • 元素位置发生偏移后,原来的位置不会被保留下来。
  • 绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响。
  • 层级提高,可以把标准文档流中的元素及浮动元素盖在下边。
#father{
    border: 1px solid black;
    padding: 0;
    position: relative;
}
#second{
    background-color: #ebff11;
    border: 1px dashed #e09344;
    position: absolute;
    left: -20px
}

4.固定定位 fixed

  • position: fixed:固定定位,相对浏览器窗口来定位,偏移量不会随滚动条的移动而移动。
div:nth-of-type(2){/*fixed,固定定位*/
    width: 50px;
    height: 50px;
    background-color: green;
    position: fixed;
    bottom: 0;
    right: 0;
}

5.z-index属性

  • z-index:调整元素定位时重叠层的上下位置,值大的层位于值小的层上方。默认层数是0。
  • opacity: x:设置透明度,x值为0~1,值越小越透明。
.tipText{
    /*z-index: 1;*/
}
.tipBg{
    background-color: black;
    opacity: 0.5;/*背景透明度*/
    /*filter: alpha(opacity=50);*//*老版本*/
}

六、制作网页动画

1.CSS变形

  • translate():平移函数,基于X、Y坐标重新定位元素的位置。
  • scale():缩放函数,可以使任意元素对象尺寸发生变化。
  • rotate():旋转函数,取值是一个度数值。
  • skew():倾斜函数,取值是一个度数值。

2.CSS过渡

transition [ transition-property transition-duration transition-timing-function transition-delay ]

  • 过渡属性( transition-property ):定义转换动画的CSS属性名称(width、height、background-color属性等)。
  • 过渡所需的时间( transition-duration ):定义转换动画的时间长度,单位为秒。
  • 过渡动画函数( transition-timing-function ):通过给过渡添加一个函数来指定动画的快慢方式。
    • ease:速度由快到慢(默认值)
    • linear:速度恒速(匀速运动)
    • ease-in:速度越来越快(渐显效果)
    • ease-out:速度越来越慢(渐隐效果)
    • ease-in-out:速度先加速再减速(渐显渐隐效果)
  • 过渡延迟时间( transition-delay ):指定一个动画开始执行的时间。

触发机制:伪类触发、媒体查询、JavaScript触发。


3.CSS动画

  • 设置关键帧
  • @keyframes的浏览器兼容性
    • 写兼容的时候浏览器前缀是放在@keyframes中间 例如:@-webkit-keyframes、@-moz- keyframes
  • animation属性
    • animation-play-state:动画的播放状态,规定动画是否正在运行或暂停。默认是 running。
    • animation-iteration-count:动画的播放次数,默认为1,特殊值 infinite,表示动画无限次播放。
    • animation-direction:动画的播放方向,规定是否应该轮流反向播放动画。
    • animation-fill-mode:动画发生的操作,规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。