图像标记和CSS

最新推荐文章于 2022-06-24 09:38:18 发布

LINGYIM

最新推荐文章于 2022-06-24 09:38:18 发布

阅读量528

点赞数

本文链接：https://blog.csdn.net/LINGCaes/article/details/103507372

版权

HTML图像标记

1、常用图像格式：
GIF格式：支持动画，无损的图像格式，支持透明
PNG格式：包括PNG-8和真色彩PNG，体积更小，支持alpha透明，颜色过渡平滑
JPG格式：显示的颜色更多，有损压缩
2、图像标记：单标记

<img src="图像UIL"/>

scr:用于指定图像文件的路径和文件名，alt:图像不能显示使的替换文本
title：鼠标悬停时显示的内容，hspace：水平边距，vspace：垂直边距
width：图像的宽度，height：图像的高度，两者不能同时用
alight：图像的对齐方式
3、绝对路径：带有盘符的路径，相对路径：不带盘符，以HTML网页文件为起点，通过层级关系描述目标图像的位置
图像与html文件位于同一文件夹：输入图像文件的名称，下一文件夹：输入文件夹名和文件名，用/隔开，上一文件夹：在文件名之前加入…/

CSS入门

1、样式规则
选择器{属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3;}
属性与属性值之间用英文“:”连接，多个“键值对”之间用英文“;”进行区分
严格区分大小写、多个属性之间必须用英文状态下的分号隔开、属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号、空格是不被解析的，花括号以及分号前后的空格可有可无
2、引入CSS样表
内行式：通过标记的style属性来设置元素的样式
<标记名 style=“属性1:属性值1; 属性2:属性值2;”>内容</标记名>
内行式只对其所在的标记及嵌套在其中的标记起作用
内嵌式：将CSS代码集中写在HTML文档的头部标记中

<head>
<style type="text/css">
    选择器{属性1:属性值1; 属性2:属性值2;}
</style>
</head>

链入式：所有样式放在一个或多个以.css为拓展名的外部样式表文件中

<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet"/>
</head>

导入式：应用style标记，并在style标记内的开头处使用@import语句

<style type="text/css">
    @import url(css文件路径);或@import "css文件路径";
</style>

3、CSS基础选择器
标记选择器：标记名{属性1:属性值1; 属性2:属性值2;}
能快速为页面中同类型的标记统一样式
类选择器：.类名{属性1:属性值1; 属性2:属性值2;}
可以为元素对象定义单独或相同的样式
id选择器：#id名{属性1:属性值1; 属性2:属性值2;}
使用#进行标记，元素的id值是唯一的，只能有一个运用
通配符选择器：*{属性1:属性值1; 属性2:属性值2;}
4、CSS文本相关样式

<head>
  <meta charset="utf-8">
  <title>CSS文本相关样式</title>
  <style type="text/css">
  .a1{
    font-style: oblique;/*字体风格，normal：默认值，italic：斜体，oblique：倾斜的字体*/
    font-weight: 900;/*字体粗细，normal：默认值，bold：粗体，bolder：更粗的字体，lighter：更细的字体*/
    font-size: 50px;/*字体大小*/
    font-family: "宋体";/*设置字体，可以指定多个字体，中间以逗号隔开，中文字体需要加英文下的引号，英文字体不需要加引号*/
    /*字体中包含空格、#、$等字符，必须加英文下的单引号或双引号，尽量使用系统默认字体*/
   }
   .a2{
    font-variant: small-caps;/*字体变化，定义小型大写字母，仅对英文字符有效，normal：默认值，small-caps：小型大写字体*/
   }
   .a3{
   color: #0000FF;/*文本颜色，预定义的颜色：red、blue，十六进制：#FF0000，RGB代码：百分比颜色值*/
    letter-spacing: 5px;/*字符与字符之间的空白，允许使用负值，默认为normal*/
    line-height: 15px;/*行于行之间的距离，单位：像素px，相对值em，百分比%*/
    text-decoration: underline;/*none：没有装饰，underline：下划线，overline：上划线，line-through：删除线*/
    text-indent: 2em;/*首行文本的缩进，可以使用负值，建议使用em*/
   }
   .a4{
   word-spacing: 5px;/*英文单词间的间距，对中文无效*/
    text-transform: capitalize;/*控制英文字符的大小写，none：默认值，capitalize：首字母大写，uppercase:全部大写，lowercase：全部小写*/
    text-align: center;/*水平对齐方式，left：左对齐，right：右对齐，center：居中对齐*/
    white-space: normal;/*空白符处理，normal：默认值，pre：预格式化原样显示，nowrap：空格空行无效，强制不换行*/
   }
   </style>
 </head>
 <body>
  <p class="a1">网页设计基础</p>
  <p class="a2">abcdef</p>
  <p class="a3">网页设计基础<br/>文本相关样式</p>
  <p class="a4">hello world</p>
 </body>

显示效果
在这里插入图片描述

CSS高级特性

一、CSS复合选择器
1、标签指定式选择器：又称交集选择器，由两个选择器构成，其中一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>标签指定式选择器的运用</title>
  <style type="text/css">
   p{color: blue;}
   .special{color: green;}
   p.special{color: red;}
  </style>
 </head>
 <body>
  <p>普通段落文本(蓝色)</p>
  <p class="special">指定了.special类的段落文本(红色)</p>
  <h3>指定.special类的标题文本(绿色)</h3>
 </body>
</html>

在这里插入图片描述
2、后代选择器：选择元素或元素组的后代，把外层标记写在前面，内层标记写在后面，中间用空格分隔，嵌套时，内层标记就成为外层标记的后代

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>后代选择器的运用</title>
  <style type="text/css">
   p strong{color: red;}
   strong{color: blue;}
  </style>
 </head>
 <body>
  <p>段落文本<strong>嵌套在段落中，使用strong标记定义的文本(红色)。</strong></p>
  <strong>嵌套之外由strong标记定义的文本(蓝色)</strong>
 </body>
</html>

在这里插入图片描述
3、并集选择器：各个选择器通过逗号连接而成的，任何形式的选择器(包括标记选择器、class类选择器、id选择器)，都可以作为并集选择器的一部分

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>并集选择器的运用</title>
  <style type="text/css">
   h2,h3,p{color: red; font-size: 14px;}
   h3,.special,#one{ text-decoration: underline;}
  </style>
 </head>
 <body>
  <h2>二级标题文本。</h2>
  <h3>三级标题文本，加下划线。</h3>
  <p class="special">段落文本1，加下画线。</p>
  <p>段落文本2，普通文本。</p>
  <p id="one">段落文本3，加下划线。</p>
 </body>
</html>

在这里插入图片描述
二、CSS层叠性和继承性
1、层叠性：指多种CSS样式的叠加

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>层叠性</title>
  <style type="text/css">
   p{font-size: 12px; font-family: "微软雅黑";}
   .special{font-size: 16px;}
   #one{color: red;}
  </style>
 </head>
 <body>
  <p class="special" id="one">段落文本1</p>
  <p>段落文本2</p>
  <p>段落文本3</p>
 </body>
</html>

在这里插入图片描述
2、继承性：书写CSS样式表时，子标记会继承父标记的某些样式，恰当的使用继承可以简化代码，降低CSS样式的复杂性。并不是所以的CSS属性都可以继承，以下属性没有继承性：边框属性、外边距属性、内边距属性、背景属性、定位属性、布局属性、元素宽高属性
三、CSS优先级
权重越高，优先级越高
标记选择器具有的权重1，类选择器具有权重10，id选择器具有权重100
继承样式的权重为0，即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为0，子元素定义的样式会覆盖继承来的样式
内行式优先：应用style属性的元素，其行内样式的权重非常高，权重远大于100
权重相同时，CSS遵循就近原则
CSS定义了一个！important命令，该命令被赋予最大的优先级，不管权重如何以及样式位置的远近，！important都具有最大优先级

LINGYIM

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图像标记和CSS

HTML图像标记1、常用图像格式：GIF格式：支持动画，无损的图像格式，支持透明PNG格式：包括PNG-8和真色彩PNG，体积更小，支持alpha透明，颜色过渡平滑JPG格式：显示的颜色更多，有损压缩2、图像标记：单标记<img src="图像UIL"/>scr:用于指定图像文件的路径和文件名，alt:图像不能显示使的替换文本title：鼠标悬停时显示的内容，hspac...
复制链接

扫一扫