zoukankan      html  css  js  c++  java
  • 前端之CSS

    CSS介绍

    CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。

    当浏览器读到一个样式表,它就会按照这个样式表来对文档进行渲染。

    CSS语法结构

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

       选择器 {属性:属性值;属性:属性值;属性:属性值;}

    案例:(style中的span对应的是body中的标签span)

    CSS注释

    /*注释*/

    CSS的三种引入方式

    1.行内样式

    直接在标签的style属性中设定CSS样式

    2.内部样式

    将CSS样式写在网页的<head></head>标签对的<style></style>标签对中,

    3.外部样式

    将css写在一个单独的文件中,然后在页面进行引入即可

    CSS选择器

    1.基本选择器

    (1)标签选择器

      span {color : blue}

    所有span标签都渲染成blue色

    (2) id选择器

    id为oo的标签里所有内容被渲染成蓝色

    (3)类选择器

    类为cl的标签渲染成红色,书写的时候格式为.cl

    (4)通用选择器

    将所有未被渲染的标签渲染成绿色

    2.组合选择器

     (1)后代选择器

    将标签div内部的span标签设置成蓝色

    (2)儿子选择器

     

    将标签div内部第一层span标签设置成蓝色

    (3)毗邻选择器

    对div标签下面第一个span标签进行渲染

     (4)弟弟选择器

    对div标签下所有同级的span标签进行渲染

    3.属性选择器

    (1)选择属性为xxx的标签

    (2)选择属性为xxx且属性值为2的标签

     

    (3)选择属性为xxx且属性值为2的p标签

    4.分组和嵌套选择器

    (1)分组

    多个元素都使用相同的样式时,可以合并成一个组,通过选择器之间添加逗号实现,如下

    将div标签和p标签统一设置字体为蓝色

    (2)嵌套

    多种选择器可以混合起来使用

     

    对cl类内部的所有span标签渲染

    5.伪类选择器

    操作a标签时候的四种状态

    input输入框获取焦点时样式

    6.伪元素选择器

    7.选择器优先级

    行内样式 > id选择器 > 类选择器 > 标签选择器 

    CSS属性

    1.宽和高

    width属性可以为元素设置宽度。

    height属性可以为元素设置高度。

    块级标签才能设置宽度,内联标签的宽度由内容来决定。

    2.字体属性

    字体大小:font-size

    字体粗细:font-weight

      lighter 更细

      bold 粗体

      bolder更粗

    文本颜色:

    可以通过三种方式制定:

    16进制:#FF0000

    颜色名字:red

    RGB值:rgb(255,0,0)

    另:rgba(255,0,0,0.5) 最后一个值制定了颜色的透明度

    3.文本属性

    文字对齐:

    text-align 属性规定元素中的文本的水平对齐方式

    表示右对齐

    文字装饰:

    text-decoration 属性用来给文字添加特殊效果

    表示添加下划线

    表示给a标签去掉下划线

    4.背景属性

    /*背景颜色*/ 

    p{background-color: green;}

    /*背景图片*/ 

    p{background-image: url("1.png");}

    /*背景图片只在水平方向上平铺*/

    p{background-repeat: repeat-x;}

    /*背景位置*/

    p{background-position: left;}

    5.边框

     边框属性

      border-width

      border-color

      border-style

    书写格式:

    p{border- 3px;
    border-color: red;
    border-style:solid;}

    简写格式:

    p{border: 3px red solid;}

    6.边框画圆

    用border-radius属性能实现圆角边框的效果。

    将border-radius设置为长或高的一半即可得到一个圆形。

    7.display属性

    display: none;#标签不显示

    display:"block"#将行内标签变为块级标签

    display: inline;#将块儿级标签变成行内标签

    display: inline-block;#将选择的标签既具有行内标签特点又有块儿级标签的特点



  • 相关阅读:
    uni-app开发经验分享六:页面跳转及提示框
    uni-app开发经验分享五: 解决三端页面兼容问题的方法
    LeetCode 535. TinyURL 的加密与解密
    LeetCode 807. 保持城市天际线
    LeetCode 84. 柱状图中最大的矩形
    LeetCode 198. 打家劫舍
    LeetCode 394. 字符串解码
    LeetCode 974. 和可被 K 整除的子数组
    LeetCode 142. 环形链表 II
    LeetCode 287. 寻找重复数
  • 原文地址:https://www.cnblogs.com/zhangdajin/p/10945510.html
Copyright © 2011-2022 走看看