zoukankan      html  css  js  c++  java
  • CSS_前端

    介绍

    CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观。
    当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。

    CSS语法

    CSS实例
    每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

    CSS的几种引入方式

    行内样式

    行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
    <p style="color: red">Hello world.</p>
    

    内部样式

    嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p{
                background-color: #2b99ff;
            }
        </style>
    </head>
    

    外部样式

    外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可。推荐使用此方式。
    <link href="mystyle.css" rel="stylesheet" type="text/css"/>  #现在写的这个.css文件是和你的html是一个目录下,如果不是一个目录,href里面记得写上这个.css文件的路径
    

    CSS选择器
    基本选择器

    p {color: "red";}
    

    ID选择器

    #i1 {   #号表示id属性,后面的i1表示id属性的值
      background-color: red;  #背景色,color:red是字体颜色,这个简单知道一下就行了,明天我们再学这些具体的css样式
    }
    

    类选择器

    .c1 {  .表示class属性,c1表示class的值
      font-size: 14px;
    }
    p.c1 {  找到所有p标签里面含有class属性的值为c1的p标签,注意他俩之间没有空格昂
      color: red;
    }
    
    
    
    注意:
    样式类名不要用数字开头(有的浏览器不认)。
    标签中的class属性如果有多个,要用空格分隔。
    

    通用选择器

    * {  *表示所有的标签
      color: white;
    }
    

    组合选择器

    后代选择器(子子孙孙)

    /*li内部的a标签设置字体颜色*/
    li a {
      color: green;
    }
    

    儿子选择器(只找儿子)

    /*选择所有父级是 <div> 元素的 <p> 元素*/
    div>p {
      font-family: "Arial Black", arial-black, cursive;
    }
    

    毗邻选择器

    /*选择所有紧接着<div>元素之后的<p>元素*/
    div+p {
      margin: 5px;
    }
    

    弟弟选择器

    /*i1后面所有的兄弟p标签*/
    #i1~p {
      border: 2px solid royalblue;
    }
    

    属性选择器

    /*用于选取带有指定属性的元素。*/
    p[title] {
      color: red;
    }
    /*用于选取带有指定属性和值的元素。*/
    p[title="213"] {
      color: green;
    }
    通过属性或者属性的值来查找,这个属性是我们自己定义的,不是id啊class啊这种html自带的属性
    每个标签里面都可以可一个title属性,这个属性就是鼠标移动到这个标签上,就显示出一个title属性的值
    还有下面这些不太常用的,正则的写法,属性值以什么开头,以什么结尾等
    /*找到所有title属性以hello开头的元素*/
    [title^="hello"] {
      color: red;
    }
    
    /*找到所有title属性以hello结尾的元素*/
    [title$="hello"] {
      color: yellow;
    }
    
    /*找到所有title属性中包含(字符串包含)hello的元素*/
    [title*="hello"] {
      color: red;
    }
    
    /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/
    [title~="hello"] {
      color: green;
    }
    
    

    分组和嵌套

    分组(多个选择器逗号分隔)
    当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
    
    
    div, p {
      color: red;
    }
    
    通常,我们会分两行来写,更清晰:
    div, #如果你这样写,千万别忘了逗号,不然就成了div下的子子孙孙里面找p标签
    p {
      color: red;
    }
    
    
    
    }
    
    嵌套
    多种选择器可以混合起来使用,比如:.c1类内部所有p标签设置字体颜色为红色。
    .c1 p {
      color: red;
    } 
    

    伪类选择器(比较特殊,CSS3版本新加的特性)

    可以根据标签的不同状态再进行进一步的区分,比如一个a标签,点击前,点击时,点击后有不同的三个状态。
    
    
    /* 未访问的链接 */
    a:link {
      color: #FF0000
    }
    
    /* 已访问的链接 */
    a:visited {
      color: #00FF00
    } 
    
    /* 鼠标移动到链接上 */  这个用的比较多
    a:hover {
      color: #FF00FF
    } 
    
    /* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间,可以让它变颜色
    a:active {
      color: #0000FF
    }
    
    /*input输入框获取焦点时样式*/
    input:focus {   #input默认的有个样式,鼠标点进去的时候,input框会变浅蓝色的那么个感觉
      #outline: none;
      background-color: #eee; #框里面的背景色
    }
    
    

    伪元素选择器(通过css来造标签,不推荐使用)

    first-letter
    常用的给首字母设置特殊样式:
    #将p标签中的文本的第一个字变颜色变大小
    p:first-letter { 
      font-size: 48px;
      color: red;
    }
    
    
    
    before
    /*在每个<p>元素之前插入内容*/
    p:before {
      content:"*";
      color:red;
    }
    
    
    
    after
    /*在每个<p>元素之后插入内容*/
    p:after {
      content:"[?]";
      color:blue;
    } 
    
    
    
    

    CSS属性相关

    css选择器的优先级

    行内(1000) >  id(100)  >  类(10) > 标签(1) > 继承(0)
    

    颜色

    rgb(255,255,255)
    #000000-#FFFFFF
    单词表示
    rgba(255,255,255,0.5)
    

    字体

    font-family 设置"微软雅黑","宋体" 
    font-size     设置字体大小 默认的字体大小16px
    font-weight  bold粗体
    

    文本

    text-align 对齐方式 left(默认) right center
    text-decoration 字体的划线   none underline overline line-through
    line-height 设置行高 字体会自动在行高内垂直居中
    text-indent 缩进em单位
    

    背景

    background-color :设置颜色
    background-image :url('xxx.jpg')
    	background-repeat :no-repeat 
    	background-position :水平位置 垂直位置    (left center right) (top center bottom)
    	background-attachment:fixed 
    	background-size :调整背景图片的大小
    background:颜色 背景图 是否重复 位置;
    

    边框

    border-style:solid; 设置边框样式
    border-color:颜色1  颜色2  颜色3 颜色4;
    border-10px;   设置边框宽度
    border: solid red 5px;
    border-top-style:dotted;
    border-top: solid red 5px;
    border-radius:边框圆角
    

    display

    不显示不占位 :none
    块级元素 : block
    行内元素 : inline
    行内块   : inline-block
    

    盒模型

    content : width height 内容
    padding : 5px   内边距
    	padding-top ...
    border : 见上面
    margin : 外边距
        margin-left ...
    	上下的盒子会塌陷 : 取上下间距之间的最大值
    	不设置border的父子盒子也会塌陷
    	更多的描述兄弟之间的关系,如果是父子之间的关系用padding来描述
    

    浮动

    float:left  right
    浮动起来的盒子会脱离标准文档,且不在独占一行
    父盒子不能被子盒子撑起来
    清除浮动 : clear:both
    伪元素清除法:
    clearfix:after{
        content:'';
        clear:both;
        display:block
    }
    overflow:hidden   scroll   auto
    

    overflow

    溢出部分如何处理?
    visible 默认 溢出了也会显示
    hidden 溢出部分隐藏
    auto scroll 溢出之后显示滚动条
    

    定位

    position : relative absolute fixed
    top:
    left:
    right:
    bottom:
    相对定位 : 相对自己原来的位置定位,还占据自己原来的位置
    绝对定位 : 相对于有定位的父盒子/整个html界面的位置,不占据原来的位置
    固定定位 : 相对浏览器窗口的
    

    z-index

    表示的在页面上标签显示的先后顺序
    1.值越大的越在前面显示
    2.设置的值没有单位没有范围
    3.浮动的盒子不能设置index
    4.从父现象:父级的优先级不高,儿子的优先级再高也没用
    

    透明度opacity

    opacity:0.5
    是整个标签的透明度
    
  • 相关阅读:
    zoj 2316 Matrix Multiplication 解题报告
    BestCoder7 1001 Little Pony and Permutation(hdu 4985) 解题报告
    codeforces 463C. Gargari and Bishops 解题报告
    codeforces 463B Caisa and Pylons 解题报告
    codeforces 463A Caisa and Sugar 解题报告
    CSS3新的字体尺寸单位rem
    CSS中文字体对照表
    引用外部CSS的link和import方式的分析与比较
    CSS样式表引用方式
    10个CSS简写/优化技巧
  • 原文地址:https://www.cnblogs.com/SkyRabbit/p/11573774.html
Copyright © 2011-2022 走看看