夜樱

(长期更新)css速查,css最美
html学过来后一直在排列布局上有所困扰,所幸css解决了大部分我想实现的。不得不说css用来美化页面是真的好。这...
扫描右侧二维码阅读全文
11
2019/01

(长期更新)css速查,css最美

html学过来后一直在排列布局上有所困扰,所幸css解决了大部分我想实现的。不得不说css用来美化页面是真的好。这边开一个css的坑,纪录下一些css的内容方便以后查阅吧。

<!--华丽分割线-->

css基础

CSS由两个主要的部分构成: 1.选择器 2.以及一条或多条声明。每条声明由一个属性和一个值组成
一个css选择器结构图:QQ截图20190111104607.png

选择器选择所需要改变的html标签,在花括号里声明所需要属性以及属性值。

多重声明:如果要定义不止一个声明,则需要用分号将每个声明分开

css选择器

  • 元素选择器:选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身

            举例:a{color:#ff0000;}(将a标签的元素颜色变为红色)
  • 类选择器:类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。语法:类名前有一个点号(.)

            举例:.pk{color: pink;}将类声明好后在html需要用的标签上运用如:<p class="pk">举例</p>

    .pk就是自己定的类选择器,class则是在html标签上调用pk类选择器。

  • ID 选择器:ID 选择器前面有一个 # 号 -

            举例:#rabbit{font-size:30px;}

    这样一个ID选择器就声明好了名称和属性,用在html标签上时候不是在标签后面加class而是加id=""。

            例如:<a herf="#" id="rabbit">这是一个例子</a>

    这样就可以使这个链接的文字变大至30像素。

!在通常书写时候id选择器只写一次且只使用一次,一个id用一次作为特定值

  • 后代选择器:后代选择器可以选择作为某元素后代的元素。

            举例:div p{color: #00ff00;}

    意思是指明在div下的后代p标签元素颜色变为绿色,在复杂结构下后代选择器的作用尤其重要。

  • 子元素选择器:如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器

            举例:div ul li>a{color:#0000ff;}

    意思是指明在div ul li后代的元素中第一个a元素颜色变为蓝色。

  • 伪类:用于向某些选择器添加特殊的效果

锚伪类:在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态
例子如下:

         a:link {color: #FF0000}        /* 未访问的链接 */  未访问颜色为红
         a:visited {color: #00FF00}    /* 已访问的链接 */  访问过后颜色为绿
         a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */ 鼠标移动到链接区域时颜色为紫色
         a:active {color: #0000FF}    /* 选定的链接 */ 点击时颜色变蓝

在伪类最特殊的地方则是冒号(:),在锚伪类例子可以看到,在选择的标签后面加冒号:后加属性名就是一个伪类的写法。

css背景样式

  • 背景颜色:可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值

           举例: div{background-color:grey;}

    这条规则把元素的背景设置为灰色

  • 背景图像:要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像

           举例:body {background-image: url(/点兔/点兔画报.jpg);}

    url下包裹着相对路劲,用绝对路径应该也是可行的,还没去尝试,这条意思指在放入背景图片至页面背景。

大多数背景都应用到 body 元素,但也可以用在段落上应用背景甚至是行内元素。

        例如:p.rabbit {background-image: url(/点兔/点兔画报.jpg);}
             a.cocoa {background-image: url(/点兔/cocoa.jpg);}

用了类选择器所以在html对应标签上加上class="(选择器名称)"就好啦

  • 背景重复:background-repeat 属性设置是否及如何重复背景图像,如果是一张小的图片不足以铺满整个页面,那么默认地,背景图像在水平和垂直方向上重复
    若不需要平铺则可以这样:

                body{
                     background-image:url("/点兔/cocoa.jpg");
                     background-repeat:no-repeat;
                     }

    no-repeat就可以使图片在x和y轴上不重复平铺开来

这里给一个background-repeat 属性的表
background-repeat.png

  • 背景定位:可以利用 background-position 属性改变图像在背景中的位置

          举例:body{ 
                    background-image:url('/i/eg_bg_03.gif');
                    background-repeat:no-repeat;
                    background-position:center;
                   }

    在 body 元素中将一个背景图像居中放置,下面给出属性值表

背景位置.png

  • 背景关联:可以设置背景随之滚动或者固定不动
    通过background-attachment 属性来设置图像随页面滚动而滚动

          举例:body 
                   { 
                    background-image: url(bgimage.gif); 
                    background-attachment: fixed;
                   }

    附属性值表背景定位.png

<!--未完待续-->

Last modification:January 11th, 2019 at 12:24 pm
If you think my article is useful to you, please feel free to appreciate

Comment here is closed