zoukankan      html  css  js  c++  java
  • 层叠样式表

      CSS简介一种用来表现HTML文件样式的计算机语言

      CSS作用:定义网页的外观(字体、背景、文本、布局、边缘、列表及其他)

      所谓样式表:是样式化HTML的一种方法HTML是文档内容,而样式表是文档的表现,或者说是外观。

      所谓层叠,将一组样式一起层叠使用,控制某一个或多个HTML元素,按样式表中的属性依次显示

    特点:

      控制页面中的每一个人元素

      对HTML语言处理样式最好的补充

      把内容处理相分离减少工作量

           使用css的样列:

    <!DOCTYPE html>
    <html>
    <head>
      <title>第一个使用css的样列</title>
      <style> /*适应该标记将css嵌入到HTML中*/
         p {                   /*为段落b标记p定义样式,使用多个层叠样式*/
          font-size: 30px;                         /*设置段落中的字号为30像素*/
          color: yellow;                           /*设置段鸾中间的字体为黄色*/
          border: 2px solid blue;            /*设置段落边框为蓝色2像素*/
          text-align: center;                       /*设置段落中的字体居中*/
          background: green;              /*设置段落背景颜色为绿色*/
          }                                /*样式选择器的结束大括号*/
      </style>
    </head>

            <!--HTML中可以使用空行调节编码格式-->

    <body>
      <p>Linux</p>
      <p>Apache</p>      <!--使用段落标记显示一个字符串-->
      <p>PHP</p>

    </body>
    </html>

          css的规则组成:主要由选择器和声明俩部分组成;列子:p{text-indent:3em}           这个当中的选择器是p

          声明则是定义样式元素,他用于设置HTML元素的样式。形式:选择器{属性:值1;属性:值2;、、、、}声明和选择器一起使用。

          属性和值之间用:连接多个属性的复合样式声明之间应该用分号;隔开,最后一个属性的值后面可以不用分号

        如果在HTML中直接使用style属性声明样式,则不需要{}而是直接将多层叠样式元素声明在style属性的双引号即可:<h1 style="font-size:x-large;color:red;">html中直接加标签

          css注释/*******************/

      `  长度单位:em(font-size:2em)是一个与一个字符高度大致相同的单位

                 px(font-size:12px)是一个像素单位

              pt(font-size:12pt)是一个磅的单位

              %(font-size:80%)是一个百分比

        颜色的单位和URL值

        颜色的值是一个关键字或一个RGB格式的数字,16个关键字:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow、RGB颜色可以有以下四种形式:

            #rrggbb

            #rgb

            #rgb(x,x,x)x是一个0-255的整数、

            #rgb(y%,y%,y%)y是一个0.0到100.0的整数

    指定背景图片需要使用URL值4种方式:

            body{bcakground:url(xsphp.gif)}不用引号

            body{background:url(http://www.lampborther.net/xsphp.gif)}完整的URL

            body{bcakground:url('xsphp.gif')}使用单引号

            body{background:ur("xsphp.gif")}使用双引号

          在HTML文档中放置css的几种方式

      内联样式表:使用style属性内联、可以应用于任何的body元素、除了basefont、papam和scrip标记。css声明当做自己的值,而每个值用分号;隔开

          列子:<p style="color:red;font-family:serif">这段样式是红色的serif字,如果字体可以用的话</p>

      嵌入一张样式表:

            使用style元素嵌入到HTML中使用<style>需要放在HTML文档的head部分

                  <head>

                    <style type="text/css" media=""screen">

                      body{ background:url(foo.gif) red;color:black}

                      p em{ background: yellow; color:black}

                      .note{ margin-left: 5em; margin-right:5em}

                    </style>

                </head>

    <style></style>这里不能写HTML语句,type属性表示使用的是文本层叠样式书写的代码{}前面是样式选择器,{}中是声明的属性。嵌入样式表对整个HTML文档都有效。

        链接到一张外部的样式表:

                  通过HTML的link元素链接到HTML文档中,<link/>标签放在head部分,可以通过多个<link/>标签来来链接多个样式文件到同一个HTML中

                     <link rel="StyleSheet" href="style.css" type="text/css"/>在HTML中链接一个外部文件

       rel属性用于定义链接文件和HTML文档之间的联系,该属性的值StyleSheet指定一个或固定的形式,而href属性是用来指定样式文件的位置可以使相对的也可以是绝对的URL

    ——《跟兄弟学 PHP》这本书非常好!

            css选择器:HTML选择器、类选择器、ID选择器、组合选择器、关联选择器,伪类和伪元素。

      HTML选择器:用来改变一个指定标签的样式。p { text-indent:3em }

                           h1{ color:red }

      类选择器:在HTML阿萨德<p>标签使用class属性引用<p>指定一个类名。

      p.dark-row { background-color :#EAEAEA }/*定义<p>元素的一个类的背景元素*/

      p.light-row { background-color :#F8F8F8}/**定义<p>元素的另一个背景元素/

    <p class=" one two three">为p元素定义了三个类one、two、three、

            ID选择器id属性指定了某一单元素,id选择器用来对这个单一元素定义单独样式。id选择器的应用类似,把class换成id即可,id名称前要加一个#

            #main  < text-indent:3em>      <p id="main">文本缩进3em</p> <!--  在HTML的p标记指定id属性值为main   -->

            关联选择器:table a { color :red} 只有在<table>内的链接<a>改变了样式

            组合选择器:只要用逗号隔开选择器就可以。h1,h2,h3,h4,h5,h6 { color:red; font-family:sans-serif} /*使用组合器修改标题*/

            伪元素选择器:指对同一个HTML元素不同状态的一种定义方式: HTML 标签:伪元素{属性:值;}

          分优先级:关联>ID>类>HTML,从左到右逐级递减

          css常见的样式属性和值:字体,文本,背景,位置,边框、列表、以及其他一些样式表属性。

          css的用途和使用意义,css的组成(语言的语法HTML中放置css的三种方法,六中选择器的作用及使用,css常见的样式和属性和值。

  • 相关阅读:
    webpack采坑十连跳
    白板编程
    Mysql加锁过程详解(1)-基本知识
    java单例模式几种实现方式
    mysql 幻读的详解、实例及解决办法
    MySQL执行计划extra中的using index 和 using where using index 的区别
    mysql INSERT ... ON DUPLICATE KEY UPDATE语句
    tk mybatis通用mapper,复杂and or条件查询
    tk.mybaits
    docker 笔记
  • 原文地址:https://www.cnblogs.com/dream2060/p/10020425.html
Copyright © 2011-2022 走看看