zoukankan      html  css  js  c++  java
  • CSS基础

    (1)内嵌样式用于定义某一个标记的样式
    
    (2)内嵌样式在四种样式(内嵌样式、内部样式、外部样式、默认样式)中优先级别最高
    <style type="text/css">
       选择器{ 
        属性:属性值;
        ......
        属性:属性值;
     }
    </style>
    (1)内部样式用于定义某一个网页的样式
    
    (2)内部样式在四种样式(内嵌样式、内部样式、外部样式、默认样式)中优先级别排名仅次于内嵌样式
    外部样式引入方式:     
     <link rel="stylesheet" type="text/css" href="样式表源文件地址">
          定义两个超级链接,第一个超链接使用外部样式,定义文字颜色为红色,字体大小为28像素,第二个超链使用默认样式
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>样式使用</title>
    <link href="3-3.css" type="text/css" rel="stylesheet">
    </head>
    <body>
      <a href="http://www.baidu.com" id="myCSS">
          百度
      </a><br />
      <a href="http://www.baidu.com">百度</a>
    </body>
    </html>
    #myCSS{
        color:red; 
        font-size:28px;
    }

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>样式使用</title>
    </head>
    
    <body>
      <a href="http://www.baidu.com" style="color:red; font-size:28px;">
          百度
      </a><br />
      <a href="http://www.baidu.com">百度</a>
    </body>
    </html>

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>样式使用</title>
    <style>
    #myCSS{
        color:red; 
        font-size:28px;
    }
    </style>
    </head>
    <body>
      <a href="http://www.baidu.com" id="myCSS">
          百度
      </a><br />
      <a href="http://www.baidu.com">百度</a>
    </body>
    </html>

      在一个HTML文件中可以引入多个外部样式表,当这些外部样式表都对某一个标记进行了样式定义时,起作用的将是最后引用的外部样式文件中对于该标记的定义。
    @import引入外部样式文件的语法格式如下: 
           @import url(样式表源文件地址)
    @import只能放在<style>标记内使用,而且必须放在其他CSS样式之前。
    浏览器会按照不同的方式来确定样式的优先级,其原则如下:
    (1)按照样式来源不同,其优先级如下:
    内嵌样式>内部样式>外部样式>浏览器默认样式
    (2)按照选择器不同,其优先级如下:
    id选择器 >class类选择器>元素选择器
    (3)当样式定义优先级相同时,取后面定义的样式为最终显示效果样式。
    设置元素选择器的基本语法如下:
    HTML元素名{ 
      样式属性:属性值;
      样式属性:属性值;
      ......
    }
    类选择器样式定义的语法格式如下所示:
    .类选择器名称{
      样式属性:属性值;
      样式属性:属性值;
      ......
    }
    定义ID选择器的语法格式:
    #ID选择器名称{
     样式属性:属性值;
     样式属性:属性值;
     ......
    }
    ID选择器的使用语法如下所示:
    <标记名称 id="ID选择器名称">
    后代选择器定义的语法如下:
    祖先选择器 后代选择器{
     样式属性:属性值;
     样式属性:属性值;
     ......
    }
    定义组合选择器的语法如下:
    选择器1,选择器2,...,选择器n{
       样式属性:属性值;
       样式属性:属性值;
    ......
    }
    父子选择器使用大于号作为选择器的分隔符
    语法格式如下所示:
    父选择器 > 子选择器 {
          样式属性:属性值;
          样式属性:属性值;
          ......
    }
    如果需要选择紧接在某一个元素后的元素,并且二者有相同的父元素,可以使用相邻兄弟选择器,相邻选择器使用加号作为选择器的分隔符
    语法格式如下所示:
    选择器1 + 选择器2 {
          样式属性:属性值;
          样式属性:属性值;
          ......
    }
    属性选择器是对带有指定属性的HTML元素进行样式设置。
    使用CSS属性选择器,可以只选中含有某个属性的HTML元素,或者同时含有某个属性和其对应属性值的HTML元素,并对其进行相关样式设置。
    属性选择器定义的语法格式如下:
    标记名称[属性选择符] {
      样式属性:属性值;
      样式属性:属性值;
      ......
    }
    通用选择器是所有选择器中最强大的,却是使用最少的。
    通用选择器的作用就像是通配符,其匹配所有可用元素。
    通用选择器由一个星号表示,一般用来对网页页面上所有元素进行样式设置
    语法结构如下:
    * {
      样式属性:属性值;
      样式属性:属性值;
      ......
    }
    (1)使用 background-color 属性为元素设置背景色。
    (2)要把图像放入背景,需要使用 background-image 属性。
    (3)设置背景图像的起始位置需要使用background-position属性进行设置
    background-repeat 属性的属性值如果是 repeat,则会将背景图像在水平和垂直方向上都平铺,
    如果值是repeat-x 和 repeat-y 则将分别使图像只在水平或垂直方向上进行重复;
    如果值是no-repeat 则不允许图像在任何方向上进行平铺。
    默认地,背景图像将从一个元素的左上角开始。
    background-clip 属性规定背景的绘制区域
    该属性是CSS3的属性,主要用于背景图像的裁剪区域
    基本语法格式是:
    background-clip : border-box | padding-box | content-box; 
     border-box是默认值,表示从边框区域向外裁剪背景;
    padding-box表示从内边距区域向外裁剪背景;
    content-box表示从内容区域向外裁剪背景。
    (1)线性渐变
    为了创建一个线性渐变,必须至少定义两种颜色结点。
    也可以设置一个起点和一个方向(或一个角度)。
    其定义的基本语法如下:
    background: linear-gradient(direction, color-stop1, color-stop2, ...);
    其中direction指明线性渐变的方向,默认是从上到下。
    (3)重复的径向渐变
    repeating-radial-gradient(shape, start-color, ..., last-color);
    shape 参数定义形状,其值可以是 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
    设置边框属性的语法格式如下:
      border : 边框宽度 边框样式 边框颜色
    例如:
      border: 1px solid red;
    在CSS3中可以通过border-radius属性为元素增加圆角边框,该属性定义的语法如下:
      border-radius : 像素值|百分比
    在CSS中,列表属性是设置无序列表标记(<ul></ul>)的呈现形式
    常用的列表属性有list-style-type、list-style-image、list-style-position以及list-style属性。
    list-style-type属性用于设置列表项标记的类型,这个类型主要有:disp、circle、square、none;
    list-style-image属性用于设置使用什么图像来作为列表符号
    list-style-position属性用来指定列表符号显示的位置,
    伪类是一种特殊的类选择符,是能够被支持CSS的浏览器自动识别的特殊选择符
    最大的用途是为超级链接定义不同状态下的样式效果。
    伪类的语法是在原有的选择符后加一个伪类,其语法格式如下所示:
    选择器:伪类{
      属性:属性值;
      属性:属性值;
      ……
    }
    CSS的伪元素不是真正的页面元素,即没有对应的HTML元素
    但是其所有用法和表现行为与真正的页面元素一样,可以对其使用例如页面元素一样的CSS样式
    表面上看上去貌似是页面的某些元素来展现,实际上是CSS样式展现的行为,因此被称为伪元素。
    常用的伪元素如下所示:
    :before:在某个元素之前插入一些内容;
    :after:在某个元素之后插入一些内容;
    :first-letter:为某个元素中的文字的首字母或第一个字使用样式;
    常用的伪元素如下所示:
    :first-line:为某个元素的第一行文字使用样式;
    :selection:匹配用户被用户选中或者处于高亮状态的部分;
    :placeholder:匹配占位符的文本,只有元素设置了placeholder属性时,该伪元素才能生效
  • 相关阅读:
    【HDOJ】2267 How Many People Can Survive
    【HDOJ】2268 How To Use The Car
    【HDOJ】2266 How Many Equations Can You Find
    【POJ】2278 DNA Sequence
    【ZOJ】3430 Detect the Virus
    【HDOJ】2896 病毒侵袭
    求奇数的乘积
    平方和与立方和
    求数列的和
    水仙花数
  • 原文地址:https://www.cnblogs.com/tszr/p/15492813.html
Copyright © 2011-2022 走看看