重温HTML之frameset、css、选择器

  分帧(frameset)

      HTML 框架是划分窗口的技术 就是把一个窗口分隔成多个窗口 每个窗口显示不同的网页内容多用于后台 也叫做分帧

    Frameset

      注意 如果你在页面上写frameset了那么就不能出现body

    <frameset></frameset>

  常用属性:

    Cols  分列单位可以写像素也可以写百分比 之后除上面内容外还可以写*(*代表剩余所有)

    Rows 分行单位可以写像素也可以写百分比 之后除上面内容外还可以写*(*代表剩余所有)

  Frameborder  分帧边框 0/1

  Border 边框粗细

  Frame 把窗口分成几份就要有对应的几个frame标签出现

    <frame />

常用属性:

  Name  给设置的区域一个名字  用作跳转使用

  Src 默认的显示页面链接

  Noresize 不允许调整边框

  Scrolling  滚动条

    yes 出现滚动条|no 不出现滚动条

CSS简介

  Cascading Style Sheets 层叠样式表(级联样式表)

  是一个文本文件,不需要编译 由浏览器直接执行

  作用是 定义网页外观 如 字体,背景,等。。。

  可以配合JavaScript做出绚丽的效果

CSS 特点

    精确的定位

    准确的控制页面的任何元素

    精细的控制

    可以做到像素级别的调整

    样式与内容分离

    便于维护,便于重用

使用方法

  内联

     写在标签内的style属性中的叫做内联

      例如: <p style="color:yellow">祖传牛皮癣,专治老中医</p>

  内嵌

    写在head标签的style标签中的属性叫做内嵌

      例如:

        <style>

           p{color:red;}

        </style>

  外联

    通过外部引入的方式使用

      例如:<link rel=”stylesheet” type=”text/css” href=”./css.css”/>

基础语法

  CSS 格式

    选择器

      负责圈定范围,要修改的元素集合

    声明

        由属性名和属性值组成,中间用冒号连接(属性名:属性值),用于设定具体样式

CSS组成

  由选择器和一个或多个声明组成,多个声明之间用分号

    选择器{属性名:属性值;属性名:属性值;}

CSS 注释

  Html 注释  <!-- -->

  样式表里面的注释就一种 /* 这里面是注释内容 */

      注释不能嵌套

单位

  长度单位

    em 倍数

      px: pixel 像素 屏幕上显示的最小单位 用于网页设计。

      PPI(DPI)每英寸的像素点 是一个率 表示了 清晰度 精度

      Pt 是一个标准的长度单位 1pt=1/72英寸 用于印刷行业

        公式: px = pt*DPI/72;

      cm/mm   厘米/毫米

颜色单位

  英文名: red green blue 。。。。。

  十六进制rgb #000000 - #ffffff

  Rgb

    数字 (0-255) rgb(255,0,0)

    百分比(0-100%) rgb(100%,0%,0%)

URL地址

  不用引号 url(test.jpg)

  绝对路径 url(http://www.baidu.com/test.jpg)

  用单引号 url(‘./test.jpg’)

用双引号url(“./test.jpg”)

选择器

  HTML选择器

    就是使用html元素作为选择器

      例如: p{color:red}

  ID选择器

    使用id值作为选择器

    使用方式: #id值{声明}

    例如:#duang{color:red;}

  Class选择器

    使用class值作为选择器

    使用方式:.class值{声明}

    例如:.butingke{color:red}

    注意:不要轻易使用id选择器 请多使用class选择器进行选择!

  关联选择器

    通过一级一级的向下查找得到唯一使用选择器

    每个选择器之间使用空格隔开

    例如: ul #zhangsan b{color:red}

  组合选择器

    多个选择器组合在一起中间使用逗号分隔

    例如:p,.pangzi{color:red}

  伪元素选择器

    :link 未访问链接

    :hover 鼠标移动到链接上时

    :active 鼠标选中的链接

    :visited 已访问的链接

      只有a标签有上面四种伪元素内容

      除a标签以外的文本标签现在只有两种伪元素内容分别为(hover,active)

      选择器的优先级: 关联选择器>id选择器>class选择器>html选择器

      排除上面的内容

        离得越近 优先级越高(就近原则)

如有错误,请指出! 本人及时纠正!

时间: 2024-10-25 15:27:23

重温HTML之frameset、css、选择器的相关文章

html 5 css 选择器

new.css /*选择器分组*/h1,h2,h3{ color: orange; font-size: 21px;}h1{/* 如果值大于1个单词,需要加上引号*//* 属性大于1个之后,属性之间用分号隔开*/ font-size: 14px; color: red; }/*继承*/body{ margin: 110px;/* font-size: 144px;*/ color: yellow;}/*派生标签*/li strong{ color: blue; font-size: 44px}s

CSS选择器

CSS选择器有:id选择器.派生选择器 1.id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. #red {color:red;} #green {color:green;} <p id="red">这个段落是红色.</p> <p id="green">这个段落是绿色.</p> 2.派生选择器 在现代布局中,id 选择器常常用于建立派生

CSS选择器优先级【转】

样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式. 示例如下: <head>     <style type="text/css&

关于css选择器的一些事 第一章 基本选择器!

关于选择器,好多人小伙伴只用了最基本的几个选择器,感觉这玩意没有啥学的,讲道理,确实也没啥学的.但是,选择器种类掌握的越多,编写代码起来就会越轻松,为啥呢.举个例子吧!先上一串代码和效果,就知道我想表达什么了! 上面一个五列的li,代码如下 <style> *{margin:0;padding: 0;list-style: none} ul{display: flex} li{flex: 1;text-align: center;border-left: 1px solid red} li:n

Day48:HTML(form标签)、CSS选择器

一.表单标签<form> 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互. 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select.fieldset和 label标签. 表单属性 action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,比如https://www.sogou.com/web method: 表单的提交方式 post/get默认取值就是ge

最常用的五类CSS选择器

一些新手朋友对选择器一知半解,不知道在什么情况下运用什么样的选择器,这是一个比较头疼的问题,针对新手朋友,对CSS选择器作一些简单的说明,希望能对大家的学习工作有一定的帮助,更多的CSS知识请参考Webjx.com的其他文章. 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为选择器,可以是p.

【CSS】使用CSS选择器

CCS选择器的作用是找出某类元素.以便使我们使用style元素或者外部样式表对这类元素设置样式. 1.使用CSS基本选择器 有些选择器使用起来非常简单,我们把这部分选择器称为基本选择器(basic selector).开发人员可使用这类选择器在文档中进行比较宽泛的选择,也可以将其看作结合多种选择器进行特殊选择的基础. 1.1 选择所有元素 通用选择器匹配文档中的所有元素.它是最基本的选择器,不过使用很少,因为匹配过于广泛. 下面代码是一个使用通用选择器的样式示例: <!DOCTYPE html>

CSS选择器优先级比较

CSS选择器的优先级,一般根据就近原则,更准确一点,根据选择器的权值大小比较,权值越高,则优先级越高.如果加上!important则优先级最高. 权值大小: !important 1000 id 100 class 10 属性 10 伪类 10 伪元素 10 标签 1 通配符* 0

CSS选择器总结

最近在www.w3school.com.cn学习了CSS选择器,下面做一个知识汇总.部分源码来自www.w3school.com.cn! 插入样式表的方法有三种: 第一种:外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 第二种:内部样式表 <head> <style type=&

第 13 章 CSS 选择器[上]

学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的版本已经升级至第三代,即 CSS3 选择器.CSS3 选择器提供了更多.更丰富的选择器方式,主要分为三大类. 一.选择器总汇 本节课主要涉及到三种选择器:基本选择器.复合选择器和伪元素选择器,具体如下: 选择器 名称 说明 CSS 版本 * 通用选择器 选择所有元素 2 <type> 元素选择器