CSS的使用和对字体、颜色、背景的设置及浏览器兼容问题

最新推荐文章于 2024-06-06 10:06:40 发布

Better Me

最新推荐文章于 2024-06-06 10:06:40 发布

阅读量2.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Despicable_Me/article/details/99638603

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS的使用

方式1：内联样式：不推荐使用，因为代码复用度太差，代码书写凌乱
方式2：内部样式：推荐使用，可以提高CSS代码的复用性
要是使用内部样式：得了解一个概念叫做选择器
方式3：外部样式：复用度更高，开发首选

内联样式：每个HTML标签，都有一个style属性，style属性值，就可以书写CSS代码,那么书写的CSS代码就会对这个标签起作用，一次只能控制这个一个标签
CSS代码的语法风格：属性名：属性值；属性名2：值2

HTML文件头部使用CSS

<html>
 <head>
  <title> New Document </title>
  <!--style  说明所要使用的标记 -->
  <!-- type="text/css"  说明这是一段css代码-->
 <style  type="text/css">
 h3{color:black;font-size:35px;font-family:黑体 }
 p{background:yellow;color:red;font-family:宋体}
 </style>
 </head>
 <body>
   <h3>在html文件的头部使用css</h3>
   <hr>
   <p>在html文件头部应用css(层叠样式表)</p>
 </body>
</html>

在HTML的标记的内部使用CSS

 基本语法：
  <html标记  style="样式的属性1:样式的属性1;样式的属性2:样式的属性2;......">
<html>
 <head>
  <title> New Document </title>
 </head>
 <body>
  <h1  style="color:red;font-size:50px;font-family:黑体">标签内部使用css</h1>
  <hr>
  <p style="background:cyan;color:red;font-family:宋体">在html标记的内部使用css</p>
 </body>
</html>

使用外部CSS文件

基本语法：
   <head>
     <link rel="stylesheet"  type="text/css"  href="css样式表文件的存放位置">
      rel="stylesheet"   是指在html文件中使用的是外部样式表文件
      type="text/css"  指明该文件的类型是样式表文件
      href="css样式表文件的存放位置"    样式表文件的地址（绝对路径或相对路径）
   </head>
第一  编写外部css文件（后缀名【.css】）
h3{color:red; font-size:35px;font-family:黑体}
p{ background:yellow; color:red;font-family:宋体}
第二  <link rel="stylesheet"  type="text/css"  href="css样式表文件的存放位置">
<html>
 <head>
  <title> New Document </title>
  <link   rel="stylesheet"   type="text/css"  href="mycss.css">
 </head>
 <body>
   <h3>使用外部css</h3>
   <hr>
   <p>在html文件使用外部css(层叠样式表)</p>
 </body>
</html>

字体的设置

1.font-family------设置字体
<html>
 <head>
  <title> New Document </title>
  <style  type="text/css">
   h2{ font-family:黑体 }
   p{ font-family:隶书,楷书,"Conrier New" }
  </style>
 </head>
 <body>
  <h2>设置字体</h2>
  <hr>
  <p>使用css来设置字体</p>
 </body>
</html>

font-size 设置字体的大小

font-size:绝对尺寸/关键字/相对尺寸/百分比
 关键字:xx-small(极小),x-small（较小）,smaller,small（小）,medium（标准）,large（大）
<html>
 <head>
  <title> New Document </title>
  <style>
#p1{ font-size:30px}
#p2{ font-size:0.1cm}
#p3{ font-size:0.5mm}
.p1{ font-size:large}
.p2{font-size:small}
.p3{font-size:xx-small}
 </style>
 </head>

font-size 设置字体

font-style  设置字体的样式（设置字体是否为斜体字）
normal----正常显示字体
italic---斜体字
oblique--歪斜体（倾斜角度大一点）
font-weight  设置字体的加粗
取值：
normal  ---- 正常显示
bold ----粗体（数字700粗细值）
bolder ---加粗
lighter ---细体（比正常字体稍微细一点）
number  ----数字型（一般整百设置，有9个级别（100----900）数字取值越大越粗）
font-variant 设置字体的变体
small-caps  表示英文字母显示为小型的大写字母,主要用于设置英文字体

text-shadow 设置字体阴影

text-shadow设置字体的阴影
规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
text-shadow: 5px 5px 5px #FF0000;

颜色的设置

1、color  
   关键字  英文单词来设置颜色“red”  红色
   RGB值  颜色码
2、设置背景颜色
   background-color
3、设置背景图片
   background-image

背景的设置和边框的设置

背景附件的设置
background-attachment
是指设置背景图片是否随着滚动条的移动而移动
scroll  ---表示背景图片随着滚动条的移动而移动
fixed---表示背景图片固定在页面上不动，不随滚动条移动而移动

设置背景图片的重复

 background-repeat
  设置背景图片总是在水平和垂直方向重复显示铺平整个网页。
  repeat   背景图片在水平和垂直方向平铺
  repeat-x  背景图片在水平方向平铺
  repeat-y  背景图片在垂直方向平铺
  no-repeat  背景图片不平铺

背景图片的位置设置

background-position
关键字            百分比              位置说明
top left          0%  0%              左上位置
top center        50%  0%             靠上居中
top right         100%  0%            右上位置
left  center      0%  50%             靠左居中
center center     50%  50%            正中位置
right center      100%  50%           靠右居中
bottom  left      0%  100%            左下位置
bottom  center    50%  100%            靠下居中
bottom  right     100%  100%           右下位置

边框的设置

边框的样式
border-style
基本语法
border-style
border-top-style
border-bottom-style
border-left-style
border-right-style
取值：
none  没有边框
dotted  点线
dashed  虚线
solid   实线
double  双实线
groove  凹型线
ridge   凸型线
inset   嵌入式
outset  嵌出式
取同一个值：四条边框线是同一个线型
取两个值：上下边框使用第一个取值，左右边框使用第二个取值
取三个值： 上边框取第一个值，左右取第二个值，下边框取第三个值
取4个值：上第一个值，右取第二个值，下取第三个值，左取第四个值

边框的属性设置和边距/填充

边框的宽度
border-width
基本语句：
border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
取值：
thin  ----细边框
medium  ---中等边框
thick--粗边框
长度---数字

边框的颜色

border-color

  基本设置语法：
   border-color
   border-top-color
   border-bottom-color
   border-left-color
   border-right-color

   取值
   英文单词  “red”代表红色
   RGB  颜色码

边框的综合设置和边距

border
边距指的是设置网页中某个元素的四边和网页中其他元素之间的空白距离
上边距  margin-top
下边距  margin-bottom
左边距  margin-left
右边距  margin-right
复合设置 margin

取值：
  数字----长度
  百分比---是相对于上一级元素的百分比，允许是负数
  auto ---自动提取边框的值，默认值

边框的圆角

border-radius设置边框圆角

border-radius:50px;
先把边框设置后再设置圆角
div { border:2px solid; border-radius:25px;  }

边框的阴影

box-shadow: 10px 10px 5px #888888;//添加阴影
X方向的偏移像素
Y方向的偏移像素
模糊的像素值
阴影颜色

填充

用来设置边框和其内部的元素之间的空白距离

上边距  padding-top
下边距  padding-bottom
左边距  padding-left
右边距  padding-right
复合设置 padding

取值：
数字---长度
百分比

CSS对文字的排版

调整字符间距
  letter-spacing
  用来控制字符之间的间距，这个间距实际上就是在浏览器中所显示的字符间的空格距离。
取值：
  normal ---表示正常显示（默认）
  长度--可以使用负数，带上单位
  单位px(像素)

添加文字的修饰

 为文字添加如下划线，删除线等修饰
  text-decoration
  属性的取值：
  underline----添加下划线
  overline---添加上划线
  line-through--添加删除线
  blink---添加闪烁效果（只能在Netscape的浏览器中正常显示）
 none--没有任何的修饰

文本的对齐方式

text-align
用来控制文本的排列和对齐方式

属性的取值：
left--左对齐
right--右对齐
center--居中对齐
justify--两端对齐

段落的缩进设置

text-indent
  用来控制每个段落的首行缩进的距离。
  属性取值：
  长度（数字）带上单位
  百分比相对于上一级元素的宽度

行高的设置

line-height
  用来控制文本内容之间行间距
  属性取值
  normal---浏览器默认的行高
  数字--设置行高带上单位
  百分比----表示行高是该元素字体大小的百分比

放大缩小位移

Transform
transform:rotate(30deg);//旋转30度
transform:translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素
transform:scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
transform:skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

动画

Animation
格式：animation:myfirst 5s;（myfirst动画名，5s动画时间）
@keyframes myfirst 
{ 0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} }
@keyframes myfirst 
{ from {background: red;} 
to {background: yellow;}}

过渡动画

transition
格式：transition: width 2s; （应用于宽度，时间2秒）
div{transition:width 5s;
		width:100px;height:100px;
		background:red;}
div:hover { width:300px; } 先定义一个层的hover  鼠标进入后把宽度改为300px  则就会看到过渡动画

自定义动画

Animation
格式：animation:myfirst 5s;（myfirst动画名，5s动画时间）
@keyframes myfirst 
{ 0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} }
@keyframes myfirst 
{ from {background: red;} 
to {background: yellow;}}

自定义动画详细属性

混合调用语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

单个使用属性
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。 infinite无限次
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。

盒子模型

顺序排列，用于div设置显示方式为盒子模型给父布局设置，其子元素按父元素设置的效果排列：
	
	//设置盒子模型
	display: flex;
	// 排列方式横向或竖向 后面加上wrap可自动控制宽高
	flex-direction: row | row-reverse | column | column-reverse

	justify-content:flex-start | flex-end | center;按方向居开始 中间  末尾	

	flex-flow:和上面的属性值相同 加上warp可以换行或换列
	例子：flex-flow:row wrap;  横向排列 如果排不下 自动换到下一行
	           flex-flow:column wrap; 竖向排列 排不下 自动换列

	flex-wrap:wrap;//自动换行 或换列
	
	设置盒子模型display: flex;后给其子元素设置margin:auto;为自动居中
	例子：margin:auto;  盒子的层上下左右都居中
	          margin:10px auto; 盒子的层 距离顶部10px  左右居中

	设置多个控件排列顺序：order:1;

浏览器兼容问题

//不同浏览器不同写法
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */

Better Me

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS的使用和对字体、颜色、背景的设置及浏览器兼容问题

CSS的使用方式1：内联样式：不推荐使用，因为代码复用度太差，代码书写凌乱方式2：内部样式：推荐使用，可以提高CSS代码的复用性要是使用内部样式：得了解一个概念叫做选择器方式3：外部样式：复用度更高，开发首选内联样式：每个HTML标签，都有一个style属性，style属性值，就可以书写CSS代码,那么书写的CSS代码就会对这个标签起作用，一次只能控制这个一个标签CSS代码的语法...
复制链接

扫一扫

专栏目录