css_css3 - CSDN
css 订阅
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]  CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 [2] 展开全文
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]  CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 [2]
信息
外文名
Cascading Style Sheets
外语缩写
CSS(也作文件扩展名)
中文名
层叠样式表
其他称呼
级联样式表
CSS发展历程
1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 [3]  从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器,于是他们决定一起设计CSS。其实当时在互联网界已经有过一些统一样式表语言的建议了,但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中,一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合每个人的爱好。哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年的www网络会议上CSS又一次被提出,博斯演示了Argo浏览器支持CSS的例子,哈肯也展示了支持CSS的Arena浏览器。同年,W3C组织(World WideWeb Consortium)成立,CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准,层叠样式表的开发终于走上正轨。有越来越多的成员参与其中,例如微软公司的托马斯·莱尔顿(Thomas Reaxdon),他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底,CSS初稿已经完成,同年12月,层叠样式表的第一份正式标准(Cascading style Sheets Level 1)完成,成为w3c的推荐标准。1997年初,W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。 [4-5] 
收起全文
  • HTML+CSS初级入门

    2019-06-24 13:10:24
    本课程主要目标是教给大家: 1)HTML和CSS能干什么? 2)HTML和CSS是什么?...3)HTML和CSS怎么用,这里会讲解常用到的HTML和CSS的使用规则 4)一步一步开发一个响应式的页面 QQ交流群:659123270
  • HTML&CSS;实战教程

    2019-06-24 13:37:28
    创建标准网页的初学者指南,也适合深入学习Html,CSS的同学,后面课程有深入的讲解,本课程会初级介绍Html和CSS,让你从入门到精通轻松掌握Web开发语言,从元素标签到CSS样式每个部分都详细进行了介绍和讲解,讲解了...
  • CSS-基础篇

    2020-05-18 19:33:45
    CSS基础部分自学笔记 内联样式 也称行内或行间样式,是在html标签上添加style属性来实现的 内部样式 在<style></style>标签内添加的样式,内部样式的代码可以复用、符合W3C标准,尽量让结构和样式分开...

    CSS基础部分自学笔记


    内联样式

    也称行内或行间样式,是在html标签上添加style属性来实现的


    内部样式

    <style></style>标签内添加的样式,内部样式的代码可以复用、符合W3C标准,尽量让结构和样式分开处理


    外部样式

    • <link rel="stylesheet" href="">
      rel:指定资源跟页面的关系
      href:资源的地址
    • @import url(./common.css);
      这种方式有很多问题,不建议使用

    颜色表示法

    • 单词表示法
    • 十六进制表示法
    • RGB三原色表示法(范围0-255)

    CSS背景样式

    background-color:背景颜色
    background-image:背景图片(URL背景地址,默认水平垂直都铺满背景图)
    background-repeat:背景图片的平铺方式(repeat-x、repeat-y、repeat、no-repeat)
    background-positon:背景图片位置(x y)=>(数字[px/%] | 单词[x:left/center/right],[y:top/center/bottom])
    background-attachment:背景图随滚动条的移动方式(scroll默认值,背景位置是按当前元素进行偏移的;fixed背景位置是按照浏览器进行偏移的)
    复合样式:background:red url() repeat 0 0;(颜色 背景图 平铺方式 位置)


    CSS边框样式

    border-style:边框样式(solid实线、dashed虚线、dotted点线…)
    border-width:边框大小(px)
    border-color:边框颜色
    【注】可单独对一个边框进行设置(border-top/right/bottom/left-)

    //利用CSS边框实现三角形
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
          div {
            width: 0px;
            height: 0px;
            border-top-color: transparent;
            border-top-style: solid;
            border-top-width: 30px;
            border-right-color: red;
            border-right-style: solid;
            border-right-width: 30px;
            border-bottom-color: transparent;
            border-bottom-style: solid;
            border-bottom-width: 30px;
            border-left-color: transparent;
            border-left-style: solid;
            border-left-width: 30px;
          }
        </style>
      </head>
      <body>
        <div></div>
      </body>
    </html>
    

    复合样式:border:1px red solid;(边框大小 颜色 样式)对单个边也可以用


    CSS文字样式

    font-family:字体类型

    • 设置多字体方式(使其能够适应更多的计算机和设备)
    • 引号的问题(有的字体中间有空格,必须用引号引起来)

    font-size:字体大小(默认大小16px),字体大小一般为偶数

    属性取值 字体大小
    xx-small 最小
    x-small 较小
    small
    medium 正常(默认值)
    large
    x-large 较大
    xx-large 最大

    font-weight:字体粗细(单词[normal正常、bold加粗]; 数字[100-500正常、600-900加粗])
    font-style:字体样式(normal正常、italic斜体[italic所有带有倾斜字体的可以设置;oblique没有倾斜属性的字体也可以设置倾斜])
    color:字体颜色
    复合样式:font:weight style size familyfont:style weight size familyfont:weight style size/line-height family


    CSS段落样式

    text-decoration:文本修饰(underline下划线、line-through删除线、overline上划线、none不添加任何修饰),可添加多个修饰,用空格隔开
    text-transform:文本大小写(针对英文段落,lowercase小写、uppercase大写、capitalize首字母大写)
    text-indent:文本缩进(首行缩进font-size的两倍,或2em[em相对单位,永远跟一个字体设置的大小相同)
    text-align:文本对齐方式(left默认、right、center、justify[两端点对齐,中间自行调节])
    line-height:定义行高(不是固定值,根据当前字体的大小变化,用数字+px或scale[相对于原来字体的比例]表示)
    letter-spacing:定义字间距
    word-spacing:定义词间距(针对英文)
    强制折行

    • word-break:break-all; 非常强烈的折行
    • word-wrap:break-word; 不是那么强烈的折行

    CSS选择器

    • ID选择器

    css:#elem{}
    html:id=“elem”
    【注】1.在一个页面中,ID值是唯一的
    2.命名规范,字母 _ - 数字 (命名的第一位不能是数字)
    3.命名方式:驼峰式(小驼峰、大驼峰)、下划线式、短线式

    • CLASS选择器

    css:elem{}
    html:class=“elem”
    【注】1.class选择器是可以复用的
    2.可以添加多个class样式
    3.多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序
    4.标签+类的写法

    • 标签选择器

    css:div{}
    html:<div></div>

    • 群组选择器/分组选择器
      css:div,p,span{}
    • 通配选择器

    *{}
    尽量避免使用通配选择器,因为会给所有的标签添加样式

    • 层次选择器

    后代:M N{}
    父子:M > N{}
    兄弟:M ~ N{} 当前M下面的所有兄弟N标签
    相邻:M + N{} 当前M相邻的N标签

    • 属性选择器

    div[class]{}
    div[class][id]{}
    div[class=box]{}
    div[class*=search]{} //只要search在class中出现过都可以选中
    =:完全匹配 *=:部分匹配 ^=:起始匹配 $=:结束匹配

    • 伪类选择器

    css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
    :link 访问前的样式(只能给a标签)
    :visited 访问后的样式(只能给a标签)
    :hover 鼠标移入时的样式(可以给所有标签)
    :active 鼠标按下时的样式(可以给所有标签)
    如果四个伪类都生效,顺序为:L V H A

    • 伪元素选择器

    div:after{content: ;color: }
    div:before{content: }
    :checked、:disabled、:focus 都是针对表单元素

    • 结构性伪类选择器

    :nth-of-type(){}、:nth-child(){} 角标从1开始,n值表示从0到无穷大即都被选中,隔行换色(2n)(2n+1)
    选中第一项 :first-of-type{} :first-child{}
    选中最后一项 :last-of-type{} :last-chile{}
    只有一项的时候被选中 only-of-type{}
    【注】type和child的区别:type看孩子类别,child不区别孩子类别


    CSS样式继承

    文字相关的样式可以被继承
    布局相关的样式不能被继承(默认不继承,可以使用inherit值让其继承)


    CSS优先级

    • 相同样式优先级
      当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况
    • 内部样式与外部样式
      内部样式与外部样式优先级相同,如果都设置了相同的样式,那么后写的引入方式优先级高
    • 单一样式优先级
      style行间(权重1000)> id(权重100) > class(权重10)> tag(权重1)> 继承
    • !important(不能针对继承的属性进行优先级的提升)
      提升样式优先级,非规范方式,不建议使用 #elem{color:red !important;}
    • 标签+类与单类
      标签+类 > 单类
    • 群组优先级
      群组选择器与单一选择器的优先级相同,靠后写的优先级高
    • 层次优先级
      权重比较、约分比较

    CSS盒子模型

    在这里插入图片描述

    padding/border/margin
    只写一个值:上右下左
    写两个值:上下、左右
    写三个值:上、左右、下
    写四个值:上、右、下、左
    1.背景颜色会填充到margin以内的区域(不包括margin区域)
    2.文字会在content区域
    3.padding不会出现负值,margin是可以出现负值的
    box-sizing(盒尺寸,可以改变盒子模型的展示形态)[content-box]/[border-box]
    使用场景:1.不用再去计算一些值
    2.解决一些百分比的问题input{width:100%;padding:30px;box-sizing:border-box;}
    margin叠加
    当给两个盒子同时添加上下外边距的时候,就会出现叠加的问题(取两者中大的值作为叠加值),只有上下有,左右没有
    解决方案:
    1.BFC规范
    2.想办法只给一个元素添加间距
    margin传递
    传递问题只会出现在嵌套的结构中,且只有margin-top会有传递的问题,其它三个方向没有传递问题
    解决方案:
    1.BFC规范
    2.给父容器加边框
    3.margin换成padding(加给父元素,padding-top: ;并进行调整)
    margin自适应居中(只可以左右,不可以上下)
    margin-left:auto;margin-right:auto;居中
    一般写法:margin:0 auto;(margin:auto auto;)


    标签分类

    布局一般用块标签,修饰文本一般用内联标签

    按类型:
    block:块 div p ul li h1…
    独占一行;支持css中所有的样式;不写宽时,和父元素宽相同;所占区域是一个矩形
    inline:内联 span a em strong img…
    挨在一起;有些样式不支持(宽、高、margin、padding的某些);不写宽时,宽度由内容决定;所占区域不一定是矩形;内联标签之间会有空隙(换行产生),解决,找到两个内联的父元素:font-size:0;然后两个内联在设置font-size;16px;空隙消失
    inline-block:内联块 input select…
    挨在一起,支持宽高


    显示框类型

    display:block/inline/inline-block/none(让指定标签隐藏)
    disp:none不占空间的隐藏;visibility:hidden占空间的隐藏


    标签嵌套规范

    块标签可以嵌套内联标签
    块标签不一定能嵌套块标签
    内联标签不能嵌套块标签


    溢出隐藏

    overflow:visible(默认)/ hidden / scroll(有滚动条)/ auto(内容多的时候有滚动,内容少的时候没有)
    overflow-x、overflow-y:针对x、y分别设置


    透明度与手势

    opacity
    0(透明)~ 1(不透明)0.5
    rgba( , , ,0.5) 最后一个为透明度,只针对背景,不针对文字,可以让指定样式透明,不改变其他样式
    cursor 手势
    default:默认透明
    自定义鼠标样式:pointer(手型)、move(十字米可移动的样式)、help(箭头带问号)
    自定义,准备图片 .cur .ico的才可以,`cursor:url(),auto;


    最大、最小宽高

    min-width、max-width
    min-height、max-height
    一个容器怎么适应屏幕的高:

    html,body{height:100%}
    .contrainer(height:100%}
    

    CSS的默认样式

    没有默认样式:div、span、…
    有默认样式:
    body(margin:8px)、h1(margin:上下16px)-h6、p、ul(margin:上下16px padding:左40px 默认点:list-style:disc)、a(text-decoration:underline)…


    CSS重置样式

    *{margin:0;padding:0;}
    ul{list-style:none;}
    a{text-decoration:none;color:#666;}
    img{display:block;}
    

    图片和容器底部有一些空隙

    • vertical-align:baseline;基线对齐 ==> vertical-aglin:bottom;底线对齐
    • display:block; //推荐
    展开全文
  • 细说CSS(CSS+CSS3)

    2019-12-18 15:11:02
    本课程包含7章45个小节课程,内容涵盖:CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。
  • 在油管上看到了10个超漂亮的CSS 3D特效,遂分享给大家,有写是css+JavaScript实现的。 3D Slicebox 在3D立方体上寻找图像幻灯片?查看演示 图像转换 与THREE.js 结合使用- 此图片幻灯片将让您的访问者惊呆了...

    在油管上看到了10个超漂亮的CSS 3D特效,遂分享给大家,有写是css+JavaScript实现的。

    3D Slicebox

    在3D立方体上寻找图像幻灯片?查看演示

    图像转换

    THREE.js 结合使用- 此图片幻灯片将让您的访问者惊呆了。你不能错过这一个,相信我!查看演示

    3D条形图

    将无聊的平面2D图表转换为3D图表。查看现场演示,点击下面的图片获取源代码。查看演示

    3D导航栏

    再次在您网站顶部的水平导航栏?试试这个吧!查看演示

    3D动画图表

    更改数据时包含动画的3D图表。查看演示

    纯CSS进度条

    忘记旧的普通2D进度条并检查这个纯CSS 3D进度条。查看演示

    CSS Helix加载器

    适合您网站的加载动画,可以让用户长时间保持关注。查看演示

    3D盒子预览器

    将相关内容分组到一个框中并将鼠标悬停在预览中!查看演示

     

    3D翻转预览器

    为您的元素添加悬停效果的完美匹配。查看演示

    3D 404错误

    用旋转的3D元素替换旧的无聊404错误页面。查看演示

    展开全文
  • CSS--实心小圆点样式

    2020-03-25 17:03:07
    <style> .marker { width: 50px; height: 50px; border: 1px solid #088; border-radius: 100px; background-color: #FFFFFFF; opacity: 0.5; }...
    <style>    
    
    .marker {      
    
     width: 50px;      
    
     height: 50px;      
    
     border: 1px solid #088;      
    
     border-radius: 100px;      
    
     background-color: #FFFFFFF;      
    
     opacity: 0.5;
    
         }    
    
    </style>
    <div class="marker" ></div>

     

    展开全文
  • CSS

    2019-08-11 12:16:51
    CSS介绍 目标 学习CSS概念和作用 HTML: 用于网页的结构(毛坯房) 概念和作用 CSS: Cascading Style Sheet ? 层叠样式表,对网页进行美化的 CSS: 用于网页的美化(装修) 案例:CSS的作用 将一个表格中所有的单元格...

    《HTML的表单与CSS样式-笔记》

    CSS介绍

    目标

    学习CSS概念和作用

    HTML: 用于网页的结构(毛坯房)
    [外链图片转存失败(img-RPiHOssX-1565495211878)(/)]

    概念和作用

    CSS: Cascading Style Sheet ? 层叠样式表,对网页进行美化的

    CSS: 用于网页的美化(装修)
    [外链图片转存失败(img-3af1elzs-1565495211880)(/)]

    案例:CSS的作用

    将一个表格中所有的单元格居中,如果使用以前的方式,每个td或tr都要设置align属性为center,而使用css则方便得多。

    效果

    [外链图片转存失败(img-HQhgoyU7-1565495211880)(/)]

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS介绍</title>
        <!--type="text/css"表示是一个CSS样式的代码-->
        <style type="text/css">
            /*现在可以一次选择所有td,设置相应的属性*/
            td {
                text-align: center;
                color: blue;
            }
        </style>
    </head>
    <body>
        <table border="1" width="400">
            <tr>
                <!--以前的做法,每个td都要设置成align=center,内容要添加font-->
                <td align="center"><font color="blue">111</font></td>
                <td align="center"><font color="blue">111</font></td>
                <td align="center"><font color="blue">111</font></td>
            </tr>
            <tr>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr>
                <td>333</td>
                <td>333</td>
                <td>333</td>
            </tr>
        </table>
    </body>
    </html>
    

    小结

    CSS的好处 描述
    功能上 设置网页的效果比HTML更强大
    耦合性 HTML和CSS代码是分离的,耦合性低

    CSS的规则和3种位置

    目标

    1. 学习CSS的规则
    2. 学习CSS出现的三种位置

    CSS规则

    [外链图片转存失败(img-LFPJW5Dy-1565495211881)(/)]

    [外链图片转存失败(img-PxdkVTvf-1565495211881)(/)]

    规范 说明
    大括号 所有的样式写在大括号中
    样式名 左边是样式的名字,使用小写。如果有多个单词,使用-分隔
    样式值 每个样式值都有固定的取值
    样式结尾 每条样式以分号结尾
    注释 与Java的多行注释一样 /* */

    CSS的位置

    行内样式

    [外链图片转存失败(img-lEYNDlAX-1565495211882)(/)]

    • 位置:样式是出现在标签开始位置,以style属性存在。
    • 特点:只有这个标签有效(实际开发基本不同)
    内部样式

    [外链图片转存失败(img-LWAeFaFr-1565495211883)(/)]

    • 位置:写在HTML文件内部,放在style标签中。
    • 特点:在本HTML文件种的多个标签起作用
    外部样式

    [外链图片转存失败(img-IaNGEaKf-1565495211883)(/)]

    • 位置:以CSS文件的方式存在HTML的外部。
    • 特点:可以给多个HTML使用

    提问:以后三种样式哪种会用得比较多?

    以后使用外部样式较多,但我上课为了看得更方便,使用内部样式。

    三种样式的代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS的位置</title>
    
        <!--内部样式:在html中使用style标签-->
        <style type="text/css">
            h2 {
                background-color: red;
            }
        </style>
    
        <!--外部样式
        rel: 表示html文件和css文件之间的关系,必须指定
        href: 指定外部css文件的位置
        type: 指定文件的类型-->
        <link rel="stylesheet" href="css/01_css.css" type="text/css"/>
    
    </head>
    <body>
        <!--行内样式:直接在标签上添加样式-->
        <h1 style="background-color: blue">我是h1</h1>
        <h2>我是h2</h2>
        <h3>我是h3</h3>
        <h4>我是h4</h4>
        <h5>我是h5</h5>
        <h6>我是h6</h6>
    </body>
    </html>
    

    css/01_css.css:

    h3 {
        background-color: deeppink;
    }
    

    小结

    1. 行内样式有什么特点?

      只有本标签可以使用
      
    2. 内部样式有什么特点?

      本HTML文件可以使用
      
    3. 外部样式有什么特点?

      多个HTML文件可以使用
      
    4. 三种位置的样式出现同名的样式会怎么样?

      行内样式 > 内部样式和外部样式,谁在下面就用谁
      

    CSS基本选择器(重点)

    目标

    学习CSS的四种基本选择器

    [外链图片转存失败(img-f5C9HYc3-1565495211884)(/)]

    CSS选择器作用

    选中要设置样式的标签

    语法格式

    <h1>我们是害虫h1</h1>
    <h1>我们是害虫h2</h1>
    <h4 class="c4" id="i4">我们是害虫h4</h4>
    

    [外链图片转存失败(img-rn2MyEcT-1565495211885)(/)]

    选择器之间优先级

    通用选择器 < 标签选择器 < 类选择器 < ID选择器
    

    案例

    通过代码演示上面CSS的各种基本选择器的使用

    效果

    [外链图片转存失败(img-CYI7Ju2Y-1565495211886)(/)]

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
    
        <style type="text/css">
            /*标签选择器:选中所有的h1标签*/
            h1 {
                color: red;
                background-color: blue;
            }
    
            /*类选择器:选择所有class属性为aa的标签*/
            .aa {
                color: orange;
                background-color: yellow;
            }
    
            /*ID选择器:选中所有id为one的标签*/
            #one {
                color: aqua;
                background-color: gray;
            }
    
            /*通用选择器:选择所有的标签*/
            * {
                color: black;
                font-size: 20px;
            }
            h6 {
                color: magenta;
            }
            .cc {
                color: gray;
            }
            #three {
                color: red;
            }
            /*选择器的优先级: 通用选择器 < 标签选择器 < 类选择器 < id选择器*/
        </style>
    </head>
    <body>
    <h1>我是h1</h1>
    <h1>我是h1</h1>
    <h2 class="aa">我是h2</h2>
    <h2 class="aa">我是h2</h2>
    <h3 class="aa">我是h3</h3>
    <h3 class="aa">我是h3</h3>
    <h4 class="bb">我是h4</h4>
    <h5 id="two">我是h5</h5>
    <h6 class="cc" id="three">我是h6</h6>
    </body>
    </html>
    

    小结

    选择器名 格式 作用
    通用 * 选中所有的标签
    标签 标签名 选中指定名称的标签
    .类名 选中指定类名的标签
    ID #id 选中指定id的标签

    选择器的优先级

    通用选择器 < 标签选择器 < 类选择器 < ID选择器
    

    扩展选择器的使用

    目标

    四种扩展选择器的使用

    什么是扩展选择器

    在基本选择器的基础上,进行组合实现更加复杂选择

    常用的扩展选择器

    [外链图片转存失败(img-jZsAsnbk-1565495211886)(/)]

    扩展选择器案例

    [外链图片转存失败(img-9n6UK4Cz-1565495211886)(/)]

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>扩展选择器</title>
        <style type="text/css">
            /*
            层级选择器
            符号: 空格
            作用: 选中父标签的下子孙标签
            */
            ol li {
                color: red;
            }
            /*
            属性选择器
            符号: []
            标签名[属性名] 作用: 选择标签名中含有属性名的标签
            标签名[属性名=值] 作用: 选择标签名中含有属性名=值的标签
             */
            input[type="text"] {
                background-color: blue;
            }
    
            /*
            伪类选择器
            符号: :
            作用: 设置标签在某种状态下的样式
             */
            /*正常状态*/
            a:link {
                text-decoration: none;
            }
            /*访问过的*/
            a:visited {
                color: green;
            }
    
            /*正在激活*/
            a:active {
                color: yellow;
            }
            /*鼠标悬浮*/
            a:hover {
                color: aqua;
            }
    
            /*得到焦点*/
            input:focus {
                background-color: pink;
            }
    
            /*并集选择器
            符号: ,
            作用: 同时选中多个标签*/
            p,span {
                color: gold;
            }
        </style>
    </head>
    <body>
    <ol>
        <li>红烧肉</li>
        <li>东坡肉</li>
    </ol>
    <div>
        <ul>
            <li>水煮鱼</li>
            <li>酸菜鱼</li>
        </ul>
    </div>
    
    用户名:<input type="text"><br/>
    密码:<input type="password"><br/>
    qq:<input ><br/>
    <hr/>
    <a href="#1">这是链接1</a><br/>
    <a href="#2">这是链接2</a><br/>
    <a href="#3">这是链接3</a><br/>
    <a href="#4">这是链接4</a><br/>
    
    <p>
        ddddd
    </p>
    
    <span>ssssss</span>
    </body>
    </html>
    

    小结

    扩展选择器 选择器符号 作用
    层级 父选择器 空格 子选择器 选中父选择器选中的子孙元素
    属性 标签名[属性] 选中带有指定属性名的标签
    伪类 标签名:状态 选中指定标签的指定状态
    并集 选择器1, 选择器2 多个选择器同时有效

    CSS背景样式

    目标

    学习CSS背景样式的设置

    每个标签都可以设置背景,我们学习的时候以标签为例

    [外链图片转存失败(img-l1SeioM7-1565495211887)(/)]

    效果

    [外链图片转存失败(img-3g33EMuy-1565495211887)(/)]

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta>charset="UTF-8">
        <title>背景样式</title>
        <style type="text/css">
            body {
            /*    !*背景色*!
                background-color: pink;
                !*背景图片*!
                background-image: url("img/girl1.jpg");
                !*平铺的方式*!
                background-repeat: repeat;
                !*平铺起始位置*!
                background-position: 50px 50px;*/
    
                /*背景色  alt+enter */
                /*背景图片*/
                /*平铺的方式*/
                /*平铺起始位置*/
                background: pink url("img/girl1.jpg") repeat 50px 50px;
    
                /*修改背景图片大小*/
                background-size: 100px 100px;
            }
        </style>
    </head>
    <body>
    <h1>我是骑单车的女生</h1>
    </body>
    </html>
    

    小结

    属性名 属性取值
    background-color 背景颜色
    background-image 背景图片
    background-repeat 背景图片的平铺方式
    background-position 背景图片的位置
    background-size 背景图片的大小

    CSS常用文本样式和字体样式

    目标

    1. CSS中常用文本样式和字体样式的设置

    2. 制作案例:诗歌

      [外链图片转存失败(img-8vpItNYq-1565495211888)(/)]

    文本样式

    [外链图片转存失败(img-UrnKxySr-1565495211888)(/)]

    字体样式

    字体样式会改变文字的形状

    [外链图片转存失败(img-GRUvXATj-1565495211889)(/)]

    案例:诗歌

    [外链图片转存失败(img-dsrCMaRk-1565495211889)(/)]

    步骤

    1. 诗放在div的层中,宽400px,全文字体大小14px;
    2. 标题放在h1中。每段文字放在p中
    3. 标题文字大小18px,颜色#06F,居中对齐
    4. 每段文字缩进2em
    5. 段中的行高是22px
    6. “胸怀中满溢着幸福,只因你就在我眼前”,加粗,倾斜,蓝色
    7. 最后一段,颜色#390; 下划线,鼠标移上去指针变化。
    8. 美字加粗,颜色color:#F36,大小18px;
    9. 文席慕容,三个字,12px,颜色#999,不加粗

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>初相遇</title>
    
        <style>
            div {
                /*诗放在div的层中,宽400px,全文字体大小14px*/
                width: 400px;
                font-size: 14px;
            }
    
            h1 {
                /*标题文字大小18px,颜色#06F,居中对齐*/
                font-size: 18px;
                color: #06f;
                text-align: center;
            }
    
            p {
                /*每段文字缩进2em*/
                text-indent: 2em;
                /*段中的行高是22px*/
                line-height: 22px;
            }
    
            /*"胸怀中满溢着幸福,只因你就在我眼前",加粗,倾斜,蓝色*/
            #xiong {
                font-weight: bolder;
                font-style: italic;
                color: blue;
            }
    
            /*最后一段,颜色#390; 下划线,鼠标移上去指针变化。*/
            p:last-child {
                color: #390;
                text-decoration: underline;
                cursor: pointer;
            }
    
            /*美字加粗,颜色color:#F36,大小18px;*/
            .mei {
                color: #f36;
                font-size: 18px;
            }
    
            /*文席慕容,三个字,12px,颜色#999,不加粗*/
            h1 span {
                font-size: 12px;
                color: #999;
                font-weight: normal;
            }
        </style>
    </head>
    <body>
    <div>
        <h1>初相遇 <span>文/席慕容</span></h1>
        <p>
            <span class="mei"></span>丽的梦和美丽的诗一样,都是可遇而不可求的,常常在最没能料到的时刻里出现。
        </p>
        <p>
            我喜欢那样的梦,在梦里,一切都可以重新开始,一切都可以慢慢解释,心里甚至还能感觉到,所有被浪费的时光竟然都能重回时的狂喜与感激。
            <span id="xiong">胸怀中满溢着幸福,只因你就在我眼前,</span>对我微笑,一如当年。
        </p>
        <p>
            我喜欢那样的梦,明明知道你已为我跋涉千里,却又觉得芳草鲜美,落落英缤纷,好像你我才初相遇。
        </p>
    </div>
    </body>
    </html>
    

    小结

    属性名 作用
    color 设置颜色
    line-height 设置行高
    text-decoration s设置文本的修饰,下划线
    text-indent s首行缩进
    text-align d对齐方式
    属性名 作用
    font-family 设置字体
    font-size s设置字体大小
    font-style italic:文字倾斜
    font-weight bolder:文字加粗

    CSS边框样式设置

    目标

    学习元素的边框样式设置

    所有的元素都可以设置边框,我们这里以div为例

    边框的样式

    [外链图片转存失败(img-WyUo3hmd-1565495211889)(/)]

    案例:边框的使用

    [外链图片转存失败(img-K8abdvd7-1565495211890)(/)]

    步骤

    1. 宽和高分别是200px,边框使用double线形,红色,10px粗细
    2. 对div整个居中

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS边框样式</title>
    
        <style>
            /*1.宽和高分别是200px,边框使用double线形,红色,10px粗细*/
            /*2.对div整个居中*/
            div {
                width: 200px;
                height: 200px;
                /*边框的线形*/
                /*border-style: double;
                border-width: 10px;
                border-color: gray;*/
                border-radius: 20px;
    
                /*边框的线形,颜色,宽度可以合起来写*/
                border: solid lightcoral 20px;
    
                /*块级元素居中:margin: auto;*/
                margin: auto;
            }
        </style>
    </head>
    <body>
    <div>
        我是div....
    </div>
    </body>
    </html>
    

    关于块级元素居中

    [外链图片转存失败(img-5hYX0I90-1565495211891)(/)]

    小结

    属性 边框样式
    border-style 边框的样式
    border-width 边框的宽度
    border-color 边框的颜色
    border-radius 边框的圆角

    两种盒子模型

    目标

    学习两种盒子模型的区别

    概述

    ​ 任何一个网页元素包含由这些属性组成:内容(content)、内边距(padding)、边框(border)、外边距(margin), 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。

    • 内容(content)就是盒子里装的东西
    • 内边距(padding)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;
    • 边框(border)就是盒子本身了;
    • 外边界(margin)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。

    [外链图片转存失败(img-SFAeXYzj-1565495211891)(/boxs.png)]

    盒子模型的属性

    网页中的每一个元素都是一个盒子

    [外链图片转存失败(img-HGxE1Zyf-1565495211891)(/)]

    如何计算盒子的尺寸

    盒子模型分为两种,分别是:标准盒模型(content-box)怪异盒模型(border-box)。绝大多数元素的尺寸默认是按照标准盒模型计算的。下面是元素的尺寸分别在两种盒模型下计算规则:

    [外链图片转存失败(img-kVIZhJfK-1565495211892)(/)]

    标准盒子模型

    [外链图片转存失败(img-NqryzbfE-1565495211893)(/)]

    标准盒子计算方式

    内容不变,盒子被撑大

    实际宽度 = 设置宽度 + 左右内边距 + 左右边框
    实际高度 = 设置高度 + 上下内边距 + 上下边框
    

    怪异盒子模型

    [外链图片转存失败(img-RdguIgCg-1565495211893)(/1551774834485.png)]

    怪异盒子计算方式

    盒子不变,内容被缩小

    实际宽度 = 设置宽度
    实际高度 = 设置高度
    

    案例:盒子模型

    [外链图片转存失败(img-PtAj21Qa-1565495211894)(/)]

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
    
        <style>
            /*标准盒子: 内容不变,宽高被撑大*/
            .one {
                box-sizing: content-box; /*默认就是标准盒子*/
                border: 15px solid gray; /*边框的样式:粗细 线型 颜色*/
                width: 200px;
                height: 200px;
                padding: 10px;
            }
    
            /*怪异盒子: 宽高就是指定大小,内容会被缩小*/
            .two {
                box-sizing: border-box;
                border: 15px solid gray;
                width: 200px;
                height: 200px;
                padding: 10px;
            }
        </style>
    </head>
    <body>
    
    <div class="one">
        标准盒子
    </div>
    
    <div class="two">
        怪异盒子
    </div>
    </body>
    </html>
    

    小结

    属性 作用
    width 设置宽度
    height 设置高度
    padding 设置内边距
    border 设置边框
    盒子模型的样式名 样式值
    box-sizing 标准盒子模型:content-box
    box-sizing 怪异盒子模型:border-box

    用户的注册案例

    目标

    使用CSS样式排版出如图所示的效果

    [外链图片转存失败(img-WBUdYQHx-1565495211894)(/)]

    步骤

    1. 使用一个四行两列的表格布局,表格居中,宽300px,高180px, 边框1px solid gray
    2. table添加背景,不平铺,图片背景的宽度和高度与table的宽和高一样
    3. 第一行和第四行跨2列,第一行是标题th,第四行是放按钮。使用图片按钮
    4. td的文字居中对齐,字体大小14px
    5. 用户名和密码文本框使用类样式,也可以使用其它选择器。宽150px,高32px,边框用实线,圆角5px,1个宽度,黑色
    6. 使用伪类样式,当鼠标移动到文本框上的时候,变成虚线橙色边框。得到焦点,背景色变成浅黄色
    7. 文本框前面有头像,密码框前面有键盘

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册</title>
        <style>
            /*宽300px,高180px; 边框solid 1px gray*/
            table {
                width: 300px;
                height: 180px;
                border: solid 1px gray;
                /*表格居中*/
                margin: auto;
                /*背景图片*/
                background-image: url("img/bg1.jpg");
                background-size: 300px 180px;
                /*圆角*/
                border-radius: 10px;
            }
    
            td {
                text-align: center;
            }
    
            /*同时选中2个*/
            #user,#pwd {
                border: 1px solid black;
                /*宽150px,高32px*/
                width: 150px;
                height: 32px;
                border-radius: 5px;
            }
    
            #user {
                background-image: url("img/head.png");
                /*不平铺*/
                background-repeat: no-repeat;
                /*左内边距*/
                padding-left: 35px;
            }
    
            #pwd {
                background-image: url("img/keyboard.png");
                /*不平铺*/
                background-repeat: no-repeat;
                /*左内边距*/
                padding-left: 35px;
            }
    
            /*伪类样式,当鼠标移动到文本框上的时候,变成虚线橙色边框。得到焦点,背景色变成浅黄色*/
            #user:hover,#pwd:hover {
                border: orange dashed 1px;
            }
    
            #user:focus,#pwd:focus {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
    <table>
        <tr>
            <th colspan="2">黑马旅游注册</th>
        </tr>
        <tr>
            <td>用户名:</td>
            <td>
                <input type="text" name="user" id="user">
            </td>
        </tr>
        <tr>
            <td>密码:</td>
            <td>
                <input type="password" name="pwd" id="pwd">
            </td>
        </tr>
        <tr>														
            <td colspan="2">
                <input type="image" src="img/regbtn.jpg">
            </td>
        </tr>
    </table>
    </body>
    </html>
    

    小结

    一个form表单,里面嵌套一个四行两列的table,使用了背景样式,边框样式,文字样式

    展开全文
  • CSS三种样式

    2019-04-02 20:05:04
    CSS样式分为:内联式css样式、嵌入式css样式、外部式css样式 内联式css样式 内联式css样式表就是把css代码直接写在现有的HTML标签中: <p style = "color:#000099">这是一个段落标记</p> 采用style...
  • css的#和.的区别

    2019-07-02 22:48:59
    css的#和.的区别 2009-03-04 14:43fyws分类:Html/Css|浏览 1911 次 css的#和.的区别如:#home #h3 { padding-top:0; padding-bottom:0; }.pop #h2, .pop #h3 { position:static; background:none; border-width:0...
  • css-常用色号

    2020-05-22 14:45:40
    #FACBD4 未完待续…
  • CSS布局

    2017-08-08 09:19:36
    以前对CSS布局有些接触,但是因为没有系统的学习过,导致每次在调整和修改起来都觉得比较困难,为了解决这个难啃的骨头花了两天时间系统的把目前比较主流的CSS布局方式系统的看了一遍,解决了之前的一些模糊的知其然...
  • CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,当我们点击类似关闭...
  • 转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的...
  • 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面效果。这时,我们为了获得统一的...
  • 经典DIV+CSS下拉菜单

    2018-07-27 18:57:32
    符合WEB标准的CSS下拉导航菜单布局及css下拉菜单模板   HTML代码如下 &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="###"&gt;div+css&lt;/a&gt; &...
  • 动态创建css样式有两种方式:1.引入外部css文件 2.插入css代码片段 动态插入css外部文件的方法:function loadStyle(url){ var link = document.createElement('link'); link.type = 'text/css'; link.rel = '...
  • 本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移。一、使用css3 transform:translate(X,Y)来偏移元素 transform属性应用于元素的2D或3D转换,这个属性允许你将元素旋转,缩放,移动...
  • 突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效。思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代。 当CSS背景图片拉伸这个问题...
  • 现在浏览器都会缓存css、js文件等,如果更改css文件的内容,浏览器是不会自动获取最新的文件,这样的机制也是为了更快速的访问网站,我们可以在引用文件时在后面加一个随机数,这样每次都会重新请求。 &lt;link ...
  • CSS设置背景透明度

    2020-07-16 23:41:04
    实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法:css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)IE...
1 2 3 4 5 ... 20
收藏数 1,532,104
精华内容 612,841
关键字:

css