zoukankan      html  css  js  c++  java
  • CSS三种引入方式 常用样式 CSS选择器

    CSS三种引入方式

    三种引入方式分别是:行间式、内联式、外联式


    行间式

    行间式:

    ​ 1.在标签头部的style属性内

    ​ 2.属性值满足的是css语法

    ​ 3.属性值用key:value的形式赋值,value具有单位

    ​ 4.属性值之间用;隔开

    <div style=" 100px; height: 100px; background-color: red"></div>
    

    内联式

    ​ 1.在style标签内(style标签一般作为head的子标签)

    ​ 2.属性值满足的是css语法

    ​ 3.属性值用key:value的形式赋值,value具有单位

    ​ 4.属性值之间用;隔开

    ​ 5.格式:选择器{样式块}

    <style type="text/css">
    		div {
    			 200px;
    			height: 200px;
    			background-color: brown;
    		}
    	</style>
    

    外联式

    ​ 1.在外部css文件中

    ​ 2.属性值满足的是css语法

    ​ 3.属性值用key:value的形式赋值,value具有单位

    ​ 4.属性值之间用;隔开

    ​ 5.格式:选择器{样式块}

    ​ 6.将html与css文件建立联系:html通过link标签链接外部css(一般写在head中)

    <link rel="stylesheet" type="text/css" href="01.css">
    

    三种引入的优先级

    三种方式没有优先级

    1.三种方式是协同布局的

    2.不重复的属性一定为唯一位置的唯一值

    3.重复的属性采用覆盖赋值,保留最后位置的属性值

    4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)

    !important 会影响优先级。有!important的会在页面上显示最终效果,不管有没有行间式,如果没有行间式将根据 内联式 外联式的顺序来显示效果,在最后的将最终显示效果


    长度及颜色单位

    基本样式

    <head>
    	<style type="text/css">
    		body {
    			 200px;
    			height:200px;
    			background-color: yellow; 
    		}
       </style>
    </head>
    

    长度

    长度单位

    pt:点,一个标准的长度单位,72pt=1in

    px:像素

    mm:毫米

    cm:厘米

    in:英寸

    em:想当长度,通常 1em=16px 用于流失布局

    rem 和em一样

    vw : 50%vw 表示当前浏览器宽度的50%

    vh: 50%vw 表示当前浏览器高度的50%

    颜色单位

    rgb(0,0,0) 三个值范围为 0~255 数值或者百分比

    rgba(0,0,0,0)前三个值可为像素或是百分比,最后一个为 0~1的数值表示透明度

    单词:直接使用单词也可以

    FFFFFF :六个十六进制位,每两位以整体,如果满足#AABBCC 可以简写成#abc


    样式

    字体样式

    font-size :30mm 大小

    font-weight:900 字重 100~900

    font-height:50mm 行高:行高设置大于等于字体大小,字体在行高中垂直居中显示

    font-style:字体风格 normal | italic |oblique

    font-family : 字族 可以自定义字族

    font-family: 华文彩云,微软雅黑;
    

    当华文彩云不存在或不起作用,在选取微软雅黑

    font : 字重 风格 大小/行高 字族

    文本样式

    color 文本颜色

    text-align: 水平居中方式 left|center|right

    text-decoration 字划线 underline|line-through | overline none

    letter-spacing: 字间距

    word-spacing 词间距

    text-indent 字体缩进

    vertical-align 纵向排列

    baseline:将支持valign特性的对象的内容与基线对齐 
    sub:垂直对齐文本的下标 
    super:垂直对齐文本的上标 
    top:将支持valign特性的对象的内容与对象顶端对齐 
    text-top:将支持valign特性的对象的文本与对象顶端对齐 
    middle:将支持valign特性的对象的内容与对象中部对齐 
    bottom:将支持valign特性的对象的文本与对象底端对齐 
    text-bottom:将支持valign特性的对象的文本与对象底端对齐
    

    word-break 自动换行

    normal:默认换行规则
    break-all:允许在单词内换行
    

    背景样式

    background-image:url() 背景图片

    background-repeat:平铺 no-repeat|repeat-x|repeat-y|repeat

    background-color:颜色

    background-position : 定位 top|bottom|left|right|center

    定位值可为方位词、百分比及固定值,值个数默认为两位(水平/垂直),一个值时垂直默认center

    background-attachment:滚动模式 scroll | fixed


    CSS选择器

    1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)

    * {
    	border: solid;
    }
    

    2.标签选择器(标签名):匹配指定标签名的对应所有标签

    div {
    	 100px;
    	height: 100px;
    	background-color: red;
    }
    section {
    	 200px;
    	height: 200px;
    	background-color: yellow;
    }
    

    3.类选择器(.):匹配指定类名对应的所有标签

    .dd {
    	color:blue;
    	font-size: 50px;
    }
    

    4.id选择器(#):匹配指定id名对应的唯一标签

    html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言.只能匹配到一个

    #ele {
    	color: blue;
    }
    

    总结

    ​ 1.通配选择器一般用于整体reset操作(reset操作:清楚系统自定义样式)

    	* {
    		margin: 0;
    	}	
    

    ​ 2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局

    ​ 3.类选择器为布局首选(建议基本全用class选择器进行布局)

    基本选择器优先级:id > class > 标签 > 通配(*)

  • 相关阅读:
    事务传播机制,搞懂。
    洛谷 P1553 数字反转(升级版) 题解
    洛谷 P1200 [USACO1.1]你的飞碟在这儿Your Ride Is Here 题解
    洛谷 P1055 ISBN号码 题解
    洛谷 P2141 珠心算测验 题解
    洛谷 P1047 校门外的树 题解
    洛谷 P1980 计数问题 题解
    洛谷 P1008 三连击 题解
    HDU 1013 题解
    HDU 1012 题解
  • 原文地址:https://www.cnblogs.com/layerluo/p/9683205.html
Copyright © 2011-2022 走看看