zoukankan      html  css  js  c++  java
  • HTML&javaSkcript&CSS&jQuery&ajax-Css

    CSS

    1 、eg

    <head>

    <style>

    body{

    background-color:#d0e4fe;}

    h1{

    color:orange;

    text-alin:center;}
    p{

    font-family:"Times New Roman";

    font-size:2opx;}

    </style></head>

    <body>

    <h1>CSS实例</h1>

    <p>这是一个段落</p>

    </body>

    2、采用CSS  修饰

    <head><style>p{ color:red; text-align:center}</style></head>

      <body> <p>HELLO  World</p></body

    >

    3 、ID选择器和class选择器

      HTML中元素以ID属性来设置选择器,CSS中ID选择器一# 来定义

     <style>

    #paral{

    text-align:center;

    color:red;

    }

    </style>

    <body><p id="paral">Hello world</p></body>

    4、 class 选择器用于描述一组匀速的样式,class选择器有别于ID选择器,class可以在多个元素中使用,class 选择器在HTNL中以class属性表示,类选择器中以一个点号   .    表示

     <style>

    .center

    {

    text-align:center

    }</style>

    <body><h1 class="center">标题居中</h1></body>

    5、CSS样式分成三种分别是 外部样式External Style sheet,内部样式 internal style sheet,内联样式inline style当样式用于多个页面时,外部样式最理想的选择器, 在使外部样式的时候使用一个文件夹改变整个站点的外观,每个页面使用<link>标签链接到样式表。 <link>标签在文档头部

    <head><link rel="stylesheet‘  type=‘text/css’’ href="mystyle.css">

    6、背景设置的CSS

       CSS背景属性的定义    background-color    background-image   background-repeat   background-attachment  bancground-position

      在body 选择器中设置颜色      body{ background-color: #b0c4de;}   background-image 属性对背景图像进行平铺显示,覆盖整个元素实体<body>{   background-image:url('page.gif';)}

    7、背景图像水平或者垂直平铺

        水平方向平铺 body{

          background-image;url('image.gif');

    background-repeat:repeat-x;}   如果不设置平铺   no-repeat即可

       设置具体位置  body{

    background-repeat:no-repeat;

    background-position:right top

     }

    8、简写方法   body{

        background: #3ef322 url('image.png')  no-repeat right top;  margin-right:200px}

    9、CSS文本格式

       内联样式的字体样式设置

          <style>

       body{

       color:red;}

    h1{color:#00ff00ff;}

    p.ex{color:rgb(244;33;33);}</style>

     <body><h1>biaoti </h1>    <p>MKNf</p>    <p class="ex">mklmm</p></body>

    10、文本的修饰

     text-decoration 属性来设置或者删除文本的装饰    删除链接的下划线

         <style> a{ text-decoration:none;}</style> <body><p >链接<a href="http://www.baidu.com/">链接</a>

    11、文本转换

      <style> p.uppercase{ text-transform:uppercase;}

        p.lowercase{text-transform: lowercase;}

      p.capitalize{ text-transform:capitalize;}

    </style>

    <body> <p class="uppercase">This is some text</p>

    <p class="lowercase">This is some text</p>

    </body>

    12、文本缩进

      <style>p{text-indent:50px;}</style>

      <body> my    younger and more vulnerable years my father gave </body>

  • 相关阅读:
    043_MySQL 索引原理 与 慢查询优化
    042_MySQL 之【视图】【触发器】【存储过程】【函数】【事物】【数据库锁】【数据库备份】
    041_SQL逻辑查询语句执行顺序
    039_MySQL 数据操作
    040_数据库设计三范式
    039_MySQL_多表查询
    039_MySQL_单表查询
    038_MySQL 表的操作
    MySQL 存储引擎
    037_MySQL操作
  • 原文地址:https://www.cnblogs.com/xinxianquan/p/8506465.html
Copyright © 2011-2022 走看看