第三节 入门属性

1.七个基本属性

 颜色:color,背景颜色:background-color,字体大小:font-size,加粗:font-weight:bold,倾斜:font-style:italic, 文字居中:text-align:center,下划线:text-decoration:underline。

2.相对路径的写法

 

   

   分两种情况:(原理都是先找被连接文件所在的与自己最近的父容器)

     a:  test1.html中请求test2.html。   

          <a href="../../02/021/test2.html">点我测试相对路径1</a>

     b: test1.html中请求test3.html

          <a href="0111/01111/test3.html">点我测试相对路径3</a>

3.七个基本选择器

   1. 标签选择器

         

   2. id选择器

                

   3. 类选择器

        

   4. 后代选择器

           
            

          空格代表后代, .div1 p 就可以选中所有的p标签了,类似的写法 :div li p  ;    ul li p  等等

     5. 交集选择器

            

          控制的是  h3标签,且具有special标签。eg: <h3 class="special" />

         注意:

       1. 交集选择器可以连续交(一般不要这么写)

       2.交集选择器,我们一般都是以标签名开头,比如div.haha  比如p.special。

     6. 并集选择器(分组选择器)

        用逗号就表示并集

    

            等于    

              h3{

                    color:red;

                }

               li{

                    color:red;

                }

 

     7.通配符      

    *就表示所有元素 

   效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。

4.四个CSS3选择器

 

      

        

5. 行高

   1. 用line-height表示,padding的作用范围是行高,不是字号。如:

    

   2. 单行文本居中的方法:令行高等于高度。

   3. 多行文本居中的方法:padding-top=(原Height-行高*行数)/ 2   ;  新Height=原Height-padding-top。

6. font

   1. font为一个综合属性,可以拆分为font-style、font-variant、font-weight、font-size、line-height、font-family,分别用来设置样式(倾斜)、小型大写字母、字号、行高、字体五个属性。

 2. 其中font-size和font-family是不可以忽略的,font-size和line-height可以写在一起,其中行高可以用百分比来表示,表示是字号的倍数。

 

  3. font-weight是用来设置加粗的,bold等价于700。

7. a标签

  1. a标签包括4个伪类选择符,分别是link、visited、hover、active,分别代表没有点击过、访问过、鼠标悬浮在上面、鼠标点击不松手。

  

 2. a标签的美化的两种形式

 (1). 常规写法

 

  (2). 简化写法

   a:link、a:visited都是可以省略的,简写在a标签里面。也就是说,a标签涵盖了link、visited的状态

   

8. background

  1. background是一个复合属性,包括background-color、background-image、background-repeat、background-position、background-attachment(background-origin、background-clip、background-size)。

  2. background-color:设置背景颜色。

     三种表示方法:单词、十六进制、rgb()。

     

 

  3. background-image:设置背景图片

    

  4. background-repeat:设置背景图是否重复

    

  5. background-position:设置背景图的位置。

      一种通过数值来控制,一种通过单词来控制。

     

  6. background-attachment:fixed。

      背景固定住,不随滚动条而移动。

  7. 综合写法

  background:red url(1.jpg) no-repeat 100px 100px fixed;

  属性的顺序可以随意写,个数也可以随意,但background-position对应的两个位置,必须要写在一块。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/438469.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

doc文件转换html,HTML+CSS入门 如何使用POI将doc文件转换为HTML

本篇教程介绍了HTMLCSS入门 如何使用POI将doc文件转换为HTML&#xff0c;希望阅读本篇文章以后大家有所收获&#xff0c;帮助大家HTMLCSS入门。<需要的jar包有&#xff1a;有一些是依赖包&#xff0c;可以使用maven下载doc文件转换为html文件package com.gsww.sxzz.controll…

第四节 CSS继承性和层叠性

一. 继承性 1. 含义&#xff1a;从自己开始直到所包裹的最小的元素&#xff0c;都可以继承一些特有的属性。 2. 作用范围&#xff1a; a. color、text-开头的、line-开头的、font-开头的&#xff0c;均可以继承。 b. 文字样式的&#xff0c;都能继承&#xff1b;所有关于盒子的…

html鼠标划过显示图片,jquery实现鼠标滑过小图查看大图的方法

本文实例讲述了jquery实现鼠标滑过小图查看大图的方法。分享给大家供大家参考。具体实现方法如下&#xff1a;1. CSS部分&#xff1a;ul{list-style:none;}li{float:left;margin-left:10px;}img{border:#CCCCCC solid 1px;}#max{position:absolute;display:none; /*隐藏层*/}2.…

html一行省略号变手型,鼠标移动到表格的TD上的时候显示成一个手型的样子怎么做?...

总结CSS3新特性&lpar;Animation篇&rpar;动画(Animation),是CSS3的亮点.//之一 通过animation属性指定keyframe来完成关键帧动画; keyframe用法: keyframes name { 0% { to ...BZOJ 1103&colon; &lbrack;POI2007&rsqb;大都市meg1103: [POI2007]大都市meg Ti…

第五节 盒子模型

1. 盒子模型的五个属性 盒模型主要涉及的属性有&#xff1a;width(宽度)、height(高度)、padding(内边距)、 border(边框)、margin(外边距)。 2. 盒子模型的两种模式 模式一&#xff1a;width盒子自身的width &#xff08;正常情况&#xff09; 模式二&#xff1a;width盒子自…

html的表单图形验证码怎么做,django中简单图形验证码实现

要实现django图形验证码&#xff0c;可以使用简单的captcha一、安装captcha在Pycharm的terminal中&#xff0c;使用pip安装第三方库&#xff1a;执行命令&#xff1a;pip install django-simple-captcha二、注册captcha在settings中&#xff0c;将‘captcha’注册到app列表里&a…

用计算机弹百战成诗,百战成诗(80P纯女热血翻唱)

[00:00.00]《百战成诗》[00:02.08]【韩信绯歌】山河万里 执枪肆意笑纳[00:06.67]【张良阿令】俗尘偌大 言灵纵法[00:10.86]【刘邦九蔓】宏图双面 名利皆入麾下[00:15.21]【项羽星汉】与我为伍[00:17.44]【虞姬孤狐】彼此**[00:22.16]【鲁班**LeMon】造物的复杂 无穷无极无垠无瑕…

第六节 标准文档流

一.标准文档流 标准文档流包括&#xff1a;块级元素和行内元素。 (1). 块级元素 特点&#xff1a; 一个元素单独一行&#xff0c;不与其他元素并行&#xff0c;可以设置其宽度和高度&#xff0c;如果不设置宽度&#xff0c;宽度默认为其父元素的100%。 (2). 行内元素 特点&…

第七节 浮动

一. 浮动的性质 1. 脱标&#xff08;脱离标准文档流&#xff09; 无论是块级元素还是行内元素&#xff0c;一旦浮动了&#xff0c;就脱离标准文档流&#xff08;脱标&#xff09;了&#xff0c;就可以设置宽和高了。 下面事例是两个div&#xff0c;其中第一个div浮动了。 1 &l…

html5测试 iphone6sp,5款旧iPhone测试iOS运行速度:只有6S速度明显提升

苹果在周三凌晨推送了iOS13.3.1更新&#xff0c;这款最新系统修复了许多Bug&#xff0c;而且还新增了功能。那么升级后的流畅度表现如何呢&#xff1f;外媒就在第一时间将iPhoneSE、iPhone6S、iPhone7、iPhone8、iPhoneXR这5款旧iPhone进行了一次速度测试&#xff0c;与iOS13.3…

第八节 定位

一. 定位介绍 谈到定位&#xff0c;顾名思义&#xff0c;就确定元素的位置&#xff0c;定位分为三种&#xff1a;相对定位、绝对定位、固定定位&#xff1b;分别用 position&#xff1a;relative、position&#xff1a;absolute、position&#xff1a;fixed来表示&#xff0c;它…

html将字符串按逗号分隔,js如何截取以逗号隔开的字符串

使用string对象的split()方法能够处理。正则表达式定义&#xff1a; split() 方法用于把一个字符串分割成字符串数组。数组使用方法以下&#xff1a;cdnstringObject.split(separator,howmany)对象参数描述&#xff1a;blogseparator 必需。字符串或正则表达式&#xff0c;从该…

CSS块级元素与行内元素的区别和联系

块元素(block element)一般是其他元素的容器元素&#xff0c;能容纳其他块元素或内联元素。块元素就好比一个四方块&#xff0c;可以放其他的四方块&#xff0c;并可以呈现在页面上任何地方。 默认情况下块元素&#xff0c;是独占一行的常见的块元素&#xff1a;div、p、h1-h6…

联想台式计算机驱动程序,联想键盘驱动程序

联想键盘驱动程序官方版联想键盘驱动程序官方版是款适合联想键盘的用户打造的驱动程序。联想键盘驱动程序主要作用就是可以帮助用户解决键盘输入过程中的各种问题&#xff0c;包括联想键无法正常使用与无法被电脑识别的问题。联想键盘驱动程序还可以让用户的键盘与主机完美的兼…

CSS块级元素、内联元素概念

CSS文档流与块级元素&#xff08;block&#xff09;、内联元素&#xff08;inline&#xff09;&#xff0c;之前翻阅不少书籍&#xff0c;看过不少文章&#xff0c; 看到所多的是零碎的CSS布局基本知识&#xff0c;比较表面。看过OReilly的《CSS权威指南》&#xff0c;发现里面…

带字母的计算机在线使用,ASCII,进位制在线转换工具

APP说明ASCII(American Standard Code for Information Interchange&#xff0c;美国标准信息交换代码)是基于拉丁字母的一套电脑编码系统&#xff0c;主要用于显示现代英语和其他西欧语言。它是现今最通用的单字节编码系统&#xff0c;并等同于国际标准ISO/IEC 646。十进制&am…

JS入门

一. 总体介绍 结合近半年来前端的项目的经验&#xff0c;这里梳理一下JS常用知识&#xff0c;方便自己日后温习查找&#xff0c;同时给广大JS入门者提供一些帮助&#xff0c;文章中如有错误&#xff0c;欢迎指出。这里从JS基础、Dom操作、JS进阶、四大家族、动画、面向对象入门…

在微型计算机中 存储容量为1kb 指的是,2016年计算机一级考试模板

​​红色标题的是正确答案18)下说法中&#xff0c;正确的是A)软盘片的容量远远小于硬盘的容量B)硬盘的存取速度比软盘的存取速度慢C)软盘是由多张盘片组成的磁盘组D)软盘驱动器是唯一的外部存储设备19)1KB 存储容量能存储的汉字内码的个数是A)128 B)256C)…

第一节 从面向对象的角度重新认识JS世界

一. 背景 距离上一篇JS文章已经20天&#xff0c;经重新总结发现&#xff0c;上一篇概况的有点浅显&#xff0c;适合初学js的入门了解&#xff0c;但对于已经学习js一段时间的人&#xff0c;或者是想系统的了解JS体系&#xff0c;接下来的文章可能会更有帮助。 该系列博客的书写…

联想记忆计算机网络,什么是双向联想记忆神经网络

联想记忆神经网络是模拟人脑, 把一些样本模式存储在神经网络的权值中, 通过大规模的并行计算, 使不完整的、受到噪声“污染”的畸变模式在网络中恢复到原有的模式本身。大脑是人体最为复杂的信息处理系统。联想记忆(AssociativeMemory, AM) 是人脑的重要认知功能之一。例如, 听…