• 初学CSS.一


    开始学习css
    html 结构,承载内容
    css 样式。层叠样式表
    JavaScript 行为
    css的使用方式()
    1.行内样式(内联样式)
    <标签 style="属性名1:属性值1;属性名2:属性值2;..."></标签>
    2.页面嵌入(内部样式表)
    在head标签里面增加一个子标签
    <style>
    选择器{
    属性名1:属性值1;
    属性名2:属性值2;
    ......
    }
    </style>
    3.外部文件(外部样式表)
    在head标签里面增加一个子标签
    <link rel="stylesheet" href="css文件的路径" />
    4.外部导入样式
    主要用在样式初始化。因为有一些标签有自己的样式,我们需要清空,方便自己计算
    css语法: (符号都是英文的)
    选择器{
    属性名1:属性值1;
    属性名2:属性值2;
    ......
    }
    颜色的表示方法

    1.颜色英文单词

    2.基础三原色 红绿蓝每个颜色是由两个16进制的数来表示的#ff 00 00

    3.rgb表示法:16*16 = 256
    rgb(0-255,0-255,0-255)

    css------选择器
    ID选择器
    使用id选择器:在元素上面增加一个id属性,id属性的属性值不用用数字开头
    一个页面中只能有一个id属性值
    css中id选择的表示方法用 # 表示
    class选择器
    使用class选择器:在元素上增加一个class属性,class属性的属性值不能用数字开头
    一个页面中可以有多个class属性值
    css中class选择器的表示方法用 . 表示
    标签选择器
    直接写标签名
    组合选择器
    选择器直接用,分隔开即可
    子代选择器
        只针对子代
    后代选择器
      用空格表示,包含着子代选择器
    通用选择器
    * 针对于所有的标签

    选择器是有权重的 

    权重越高,冲突部分的样式就以权重高的为主,并不是说这个选择器没有用了,而是里面冲突的样式

    权重仅仅只能作为参考
    权重的计算
    不需要管子代和后代的
    如果权重相同,就近原则。以后定义的为准

    选择器权重: 
    内联样式 1000
    id 100
    class 10
    元素 1
    通用 0
    !important 只要出现,就以这个为主

    CSS文本

    text-align: right; /*文本对其方式*/
    text-decoration: underline; /*文本下划线*/
    color: #f00; /*设置字体的颜色*/
    line-height: 166.67px; /*文本的行高*/
    /*一行文字所占的高度,让他上下居中*/
    /*font-family: "Microsoft YaHei";*/ /*设置字体的样式:宋体,楷体... 去百度,翻译中英文 */
    font-family: "宋体"; /*自己去百度找到宋体对应的英文,节约空间*/
    font-style: italic; /*规定字体是否倾斜*/
    font-weight: bold;
    font-size: 16px ; /*设置字体的大小*/

    <!--:hover 叫伪类选择器
    当你的鼠标放上去的时候,会变化成的样子
    权值 10

    cursor: none; /*设置鼠标的样式*/
    display: block; /*元素分为三大类,设置元素的显示方式
    行内 inline
    块级 block
    行内块 inline-block
    none 无

    opacity: 0.1;    /*取值的范围是0-1之间,可以为0和1*/

    background-color: rgba(255,0,0,0.1);    /*最后一个参数a表示透明度,取值的范围是0-1之间,可以为0和1*/

     

  • 相关阅读:
    Thinkphp的 is null 查询条件是什么,以及exp表达式如何使用
    thinkphp5多文件上传如何实现
    如何动态改变audio的播放的src
    js插件---10个免费开源的JS音乐播放器插件
    html5页面怎么播放音频和视频
    Thinkphp5图片上传正常,音频和视频上传失败的原因及解决
    leetcode
    HTML5 画一张图
    Linux内核和根文件系统引导加载程序
    [dp] hdu 4472 Count
  • 原文地址:https://www.cnblogs.com/4556xu/p/10938929.html
Copyright © 2020-2023  润新知