一、CSS样式

  1.每个css样式都必须由两部分组成:选择符(Selector)+声明(Deleration)

    注:声明又包括属性(Properyt)和属性值(value)

  2.css属性:属性是指定选择符具有的属性,它是css的核心,css2有150多个属性;

  3.css属性值:属性值包括法定属性值跟常规的数值加单位或颜色值(colorValue)如:(25px)

二、CSS声明

  1.关于文本的css声明:

    1)文字大小{font-size:value;}

      a.属性值为数值型时,必须给属性值加单位(px),属性值为0时除外

      b.单位还可以为pt;9pt=12px;

      c.为了减小系统的字体显示差异,IE、Netscape Mozilla的浏览器制作商于1999年召开会议,共同确定16px/ppi为标准字体大小,默认值即1em,默认情况下,1em=16px,0.75em=12px;em始终会根据离自己最近的父元素字体大小的改变而改变

      d.使用绝对大小关键字:

        xx-small=9px;

        x-small=11px;

        small=13px;

        medium=16px;

        large=19px;

        x-large=23px;

        xx-large=27px;

    2)文本颜色:{color:#colorValue;}

      a.二进制:0,1b.

      b.十进制:0~9

      c.十六进制:0~9、a~f

       用十六进制表示颜色值时前面要加#;每表示三原色的三组数字相同时,可以缩写为3位

    3)文本字体:{font-family:字体;}

      a.Windows中文版本操作系统下,中文默认字体为宋体或新宋体,英文字体默认为Arial

      b.当字体是中文字体时,需加双引号;

      c.当英文字体中有空格时,需加双引号;如(“Times New Roman”)

      d.当英文字体只有一个单词组成是不加双引号的;如(Arial)

      e.设置多个字体的语法:{font-family:字体1,字体2,字体3;}

      注:当同时设置中英文字体的时候,中文字体要写在英文字体之后;

      说明:浏览器首先会找到字体1、如果存在就使用改字体来显示内容,如果字体1不在的情况下,则会寻找字体2,如果字体2也不存在,按字体3显示内容,如果字体3也不存在,则安系统默认字体显示

    4)加粗:{font-weight:bolder(更粗的 )/bold(加粗)/normal(正常)/100~900}

      a.在css规范中,把字体的粗细分为9个等级,分别为100~900,其中100对应最轻的字体变形,二900对应最重的字体变形;

      b.一般400=normal,700=bold;100~500常规显示,600~900加粗显示;

      c.浏览器版本的不同可能会出现递增样式的出现。

    5)倾斜:{font-style:italic(倾斜度小)/oblique(倾斜度大)/normal(取消倾斜,常规显示)}

      a.italic与oblique看起来无任何区别

    6)设置小型的大写字母:{font-variant:normal(正常)/small-caps(小型的大写字母);}

      a.small-caps只对小写的英文起作用

    7)首行缩进:{text-indent:Value;}

      a.text-indent可以取负值;

      b.text-indent属性只对第一行起作用

    8)水平对齐方式{text-align:left(左对齐 )/right(右对齐)/center(居中对齐)/justify(两端对齐低版本浏览器不兼容);}

    9)垂直对齐方式{vertical-align:top(上)/bottom(下)/middle(居中);}

      a.图文排列中常用,无法单独使用,需要支持条件,只有inline-block元素才支持vertical-align对齐方式

    10)行高{line-height:normal/value;}

      a.当单行文本行高等于容器高时,可实现单行文本在容器中垂直中齐效果;

      b.当单行文本的行高小于容器高时,可实现单行文本在容器中垂直中齐以上任意位置定位;

      c.当单行文本的行高大于容器高时,可实现单行文本在容器中垂直以下任意位置定位。

      d.倍行高:{line-height:2;} 2倍 ,{line-height:1.5;}1.5倍;

        注:当使用倍行高时,单位不加PX

    11)复合式写法:{font:style variant weight size/line-height family;}

      a. style     variant              weight     size/ line-height     family

          倾斜    小型大写字母     加粗       字号 /  行高            字体

      b.按以上顺序;size 、line-height和family固定不可和其他属性位置互换;

      c.当字号大小,字体和行高缩写时,字号和行高要用斜杠合并成一个属性值,且同时有字号大小和字体时,才能缩写。

    12)控制英文大小写:

      {text-transform:none(默认值)/capitalize(每个单词首字母大写)/uppercase (都为大写字母) /lowercase ( 都为小写字母 ) }

    13)文本修饰:

      {text-decoration:none(没有修饰)/underline(添加下划线)/overline(添加上划线)/line-through(添加删除线)/blink(闪烁,高版本浏览器不支持blink属性);}

      a.underline overline line-through这三个属性值是可以同时存在的;

    14)字间距{letter-spacing:Value;}控制字间距;

    15)词间距{word-spacing:Value;}控制英文单词词间距

    16)文本流控制{layout-flow:horizontal(自左而右)/vertical-ideographic(自上而下);}(只支持IE浏览器)

  2.关于列表的css声明:

    1)定义列表符号样式:

      {list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);}

    2)使用图片作为列表符号:

      {list-style-images:url(所使用图片的路径及全称);}

    3)关于列表符号的位置:

      {list-style-position:outside(外边)/inside(里边);}

      a.关于列表的属性语法(缩写)list-style:属性值1 属性值2 属性值3;

      例:{list-style:url(images/aa.jpg) inside none;}

  3.关于背景的css声明:

    1)背景颜色:{background-color:#colorValue;}

    2)背景图片的设置:{background-images:url(背景图片的路径及全称);}

      a.网页上有两种图片形式:插入图片、背景图;插入图片为网页内容,背景图为网页的表现;默认情况下,背景图上面是可以显示其他内容和图片,而插入图片上面是不能显示其他内容和图片的。

      b.背景图片的显示方式:①背景图片大小小于元素大小,默认平铺

                 ②背景图片大小等于元素大小,完全显示

                 ③背景图片大小大于元素大小,只显示元素范围大小的背景图;

    3)背景平铺设置:{background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x(横向平铺)/repeat-y(纵向平铺);}

    4)背景图片的位置:{background-position:right/left/center(水平方向上的对齐方式) top/center/bottom(垂直方向上的对齐方式)或数值}

    5)背景图的固定:{background-attachment:srcoll(滚动)/fixed(固定);}

      a.背景属性的缩写语法:background:属性值1 属性值2 属性值3;

      例:background:url(背景图片的路径及全称) no-repeat center top;

    6)网页上常用的图片格式(压缩图片)

      a.jpg:有损压缩格式,靠损失图片本身的质量来减少图片体积,适用于颜色丰富的图像;

      b.gif:有损压缩格式,靠损失图片的色彩来减小图片体积,支持透明,支持动画,适用于颜色数量

      c.png:有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,是fireworks的源文件格式,适用于颜色数值少的图像(一般用于透明图像)

HTML学习笔记Day3的更多相关文章

  1. python网络爬虫与信息提取 学习笔记day3

    Day3: 只需两行代码解析html或xml信息    具体代码实现:day3_1    注意BeautifulSoup的B和S需要大写,因为python大小写敏感 import requests r ...

  2. Python学习笔记——Day3

    Python字典(Dictionary) 字典是一种可变容器模型,可存储任意类型对象. 字典的每个键值(key => value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花 ...

  3. [python学习笔记]Day3

    函数 如: def is_leapyear(year): if (year%4 == 0 and year%100 != 0) or (year%400 == 0): return True else ...

  4. JS学习笔记Day3

    一.什么是循环结构 满足一定条件,(((重复)))执行一段相同的代码 二.循环思想是什么(循环三要素) 开始 结束 步长(步进) 三.可以实现循环语句的有哪些 while do while for 四 ...

  5. python学习笔记Day3

    set有点:1.访问速度快 2.天生解决了重复问题 tuple与set区别: 元组可重复,set不可重复创捷集合1 >>> s1.add('alex')>>> pr ...

  6. sqli-labs学习笔记 DAY3

    DAY 3 sqli-labs lesson 6 同lesson 5,只是把单引号改为双引号 sqli-labs lesson 7 同lesson 5,只是把单引号后面加两个空格,使用Burpsuit ...

  7. Python学习笔记 - day3 - 数据类型及运算符

    Python的数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同 ...

  8. Linux20期学习笔记 Day3

    管道符.通配符.转义符及部分常用命令.考点

  9. 商业爬虫学习笔记day3

    一. 付费代理发送请求的两种方式 第一种方式: (1)代理ip,形式如下: money_proxy = {"http":"username:pwd@192.168.12. ...

随机推荐

  1. 三、K8S成功

    kubeadm join 172.17.149.114:6443 --token yjogpa.kk85u2i4n5rt1omq --discovery-token-ca-cert-hash sha2 ...

  2. 【python练习题】程序16

    #题目:输出指定格式的日期. import time print (time.strftime('%Y:%m:%d %X',time.localtime(time.time())))

  3. [离散时间信号处理学习笔记] 3. 一些基本的LTI系统

    首先我们需要先对离散时间系统进行概念上的回顾: $y[n] = T\{ x[n] \}$ 上面的式子表征了离散时间系统,也就是把输入序列$x[n]$,映射称为$y[n]$的输出序列. 不过上述式子也可 ...

  4. 洛谷 P1102 A−B数对

    题目描述 出题是一件痛苦的事情! 题目看多了也有审美疲劳,于是我舍弃了大家所熟悉的 A+BA+BA+B ProblemProblemProblem ,改用 A−BA-BA−B 了哈哈! 好吧,题目是这 ...

  5. Civil 3D 二次开发 创建AutoCAD对象—— 00 ——

    不积跬步无以至千里,不积小流无以成江海.虽然创建一条直线.添加一个图层这样的小程序没有什么实际意义(内部命令很简单就可以完成),但对于初学二次开发的您来说,这可是一大步,这一步跨出去,您就跨进了二次开 ...

  6. 洛谷P1209修理牛棚题解

    题目 这个题一眼看上去是一个贪心,但是一个贪心题就一定要用一个贪心的做法来做吗,为什么不能写一个DP呢,这个题我们可以从他修理牛棚的角度来看,价值就是一个木板可以修几个,但是也同时消耗掉了一个木板的长 ...

  7. Hdoj 1232.畅通工程 题解

    Problem Description 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇间都可以实现交通 ...

  8. 【BZOJ2137】submultiple(数论)

    [BZOJ2137]submultiple(数论) 题面 BZOJ 题解 首先不难发现答案就是:\(\displaystyle\prod_{i=1}^n (\sum_{j=1}^{p_i+1}j^k) ...

  9. 转----ui输入测试数据

    jin'tHackChecker黑测工作室 - 专注于软件安全测试技术研究!(www.AutomationQA.com)常用安全测试用例 建立整体的威胁模型,测试溢出漏洞.信息泄漏.错误处理.SQL ...

  10. Nginx+Tomcat-cluster构建

    -----------ReProxy-------------------------Client-----------192.168.56.202 nginx 192.168.56.200 Tomc ...