zoukankan      html  css  js  c++  java
  • HTML学习笔记四CSS样式

    <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>

  • 相关阅读:
    Codeforces Round #646 (Div. 2)【B. Subsequence Hate题解】
    关于MyBatis常见映射异常
    SQL语句汇总(终篇)—— 表联接与联接查询【转载自https://www.cnblogs.com/ghost-xyx/p/3813688.html】
    SQL语句汇总(二)——数据修改、数据查询【转载自https://www.cnblogs.com/ghost-xyx/p/3798362.html】
    浮动元素引起的问题和解决办法
    PHP 神奇的sprintf函数
    关于this,作用域,属性,原型链的一个小练习
    for...of 与 for...in 区别
    ES6 Promise对象then方法链式调用
    ES6通过WeakMap解决内存泄漏问题
  • 原文地址:https://www.cnblogs.com/tangzhengyue/p/2156308.html
Copyright © 2011-2022 走看看