博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML学习笔记四CSS样式
阅读量:7208 次
发布时间:2019-06-29

本文共 1405 字,大约阅读时间需要 4 分钟。

<STYLE>

中间包含3部分:选择器(selector),属性(property),属性的值(value

</STYLE>

 

例如

<STYLE type="text/css">

         P{

                   color:red;

                   font-size:30px;

                   font-family:隶书;

         }

</STYLE>

选择器P定义了<P>标签的样式。所以用<P>标签的段落,都采用上面的样式来统一布局。

 

类样式:

<STYLE type="text/css">

         .red{

                   color:red;

                   font-size:30px;

                   font-family:隶书;

                   }

</STYLE>

即把选择器变成类名,并在前面加小点“.”。

应用的时候只需要这样即可:

<H2 CLASS=".red">静夜思</H2>

<P CLASS=".red">床前明月光</P>

 

常用的样式属性:

文本属性:

Font-size:字体大小

Font-family:字体类型

Font-style:字体样式

Color:颜色

Text-align:对齐方式

 

背景属性:

Background-color:背景色

Background-image:背景图片

Background-repeat:背景图像显示方式repeat(默认,平铺)、no-repeat(不平铺)、repeat-xrepeat-y

例:

<STYLE type="text/css">

         TABLE{

                   background-image:url(images/type_back.jpg);

                   background-repeat:no-repeat;

                   }

</STYLE>

 

方框属性:

Margin:边界 margin-top, margin-right, margin-bottom, margin-left

Border:边框 border-style, border-width, border-color

Padding:填充 padding-top, padding-right, padding-bottom, padding-left

 

CSS控制超链接样式:

A:link {color:red}  未被访问的链接样式,红色

A:visited {color:green}  已被访问过的链接样式,绿色

A:hover {color:yellow}  鼠标悬浮在链接上时的样式,黄色

A:active {color:blue}  鼠标正在按下时链接文字的颜色,蓝色

 

样式表的3类应用方式:

内嵌样式表,行内样式表,外部样式表文件。

外部样式表文件包括:链接外部样式表和导入样式表。

链接外部样式表:

<HEAD>

         <LINK rel="stylesheet" type="text/css" href="newstyle.css">

</HEAD>

rel=”stylesheet”:表示在网页中使用这个外部样式表

type=”text/css”:表示文本类型的样式

href=”newstyle.css”:指定样式文件

导入样式表:

<STYLE type="text/css">

         @import  样式表文件.css;

</STYLE>

转载于:https://www.cnblogs.com/tangzhengyue/archive/2011/08/28/2156308.html

你可能感兴趣的文章
利用RGB-D数据进行人体检测 带dataset
查看>>
live555的编译及使用
查看>>
C++builder XE 安装控件 及输出路径
查看>>
优点和阵列的缺点,并且一个链表
查看>>
CSS3透明属性opacity
查看>>
Genymotion模拟器的安装及常见问题解决方法
查看>>
PHP 乘法口诀表
查看>>
如何彻底关闭windows update
查看>>
SpringMVC+SwfUpload进行多文件同时上传
查看>>
ASP.NET Core中的依赖注入(2):依赖注入(DI)
查看>>
Java_JAVA6动态编译的问题
查看>>
scala 日期格式转换
查看>>
Filtering Specific Columns with cut
查看>>
多线程编程1-NSThread
查看>>
反馈组态的判别
查看>>
【Web】Rest API 验证授权如何做?
查看>>
Swift 中的 @autoclosure
查看>>
多迪将企业的Python工程师定位成哪几类?
查看>>
Rom 检测
查看>>
【iOS工具】rvm、Ruby环境和CocoaPods安装使用及相关报错问题解决(2016 12 15 更新)...
查看>>