• 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属性时,该伪元素才能生效
  • 相关阅读:
    ADB 多设备中指定设备的启动
    vuex 绑定表单,多个输入框的解决办法
    vue 自动触发点击事件
    js 打印dom的所有属性
    邮件分享
    table表格 td设置固定宽度
    Echarts--Y坐标标题显示不全
    ExtJS5.0 菜鸟的第一天
    字体设置
    短信验证码+倒计时
  • 原文地址:https://www.cnblogs.com/tszr/p/15492813.html
Copyright © 2020-2023  润新知