CSS 样式表{二}
1 选择器的优先级
选择器的优先主要考虑选择器的权重
可以将各种选择器的权重以数值来表示,数值越大,优先级越高
选择器 | 权重值 |
标签selector | 1 |
类选择器 | 10 |
ID选择器 | 100 |
行内样式 | 1000 |
复杂选择器优先级的计算:
1 群组选择器不参与计算
后代和子代选择器,各种选择器权值
2 伪类选择器的权值与类选择器保持一致,都是10
2 尺寸单位
1 。px :像素单位,浏览器默认单位
2 %:百分比,参照父元素对应属性的值计算
3 in : inch 英寸 换算: 1 inch = 2.54cm
4 pt :磅 ,1 pt = 1/72 in
5 cm
6 mm
补充:
7 em:默认情况下,字体大小为16px, 1 em =16px
3 颜色取值
1 英文单词
2 rgb()表示法:
根据红绿蓝三原色组合呈现不同的颜色
每个值取值范围 0~255
3 rgba(r,g,b,alpha)表示法
rgb三原色取值范围 0~255
alpha透明度取值范围0 (透明)-1(不透明)
4 颜色的十六进制表示法
把三原色的十进制范围 0~255 转换成十六进制表示
十六进制的取值范围:0-9 a-f
0-255 换算成十六进制 00-ff
语法:#开头,跟 上 6位的十六进制,每两位为一组表示一种三原色
5 短十六进制表示颜色
# 开头,采用三位十六进制代表三原色
浏览器在解析时,会自动会对每一位进行重复,补全成长十六进制
3 HTML 标签分类
1 块级元素:
特点:
1 独占一行,不与其他元素共行
2 可以手动调整宽度
3 默认情况下,块元素的宽度与父元素保持一致
常见块元素:body h1-h6 div ul ol li table form p
2 行内元素:
特点:
1 可以与其他元素共行显示
2 不可以手动调整宽高大小
3 实际大小由元素的内容多少决定
常见行内元素: span label i b s a sup sub strong
3 行内块元素:
特点:
1 可以共行显示
2 可以手动调整宽高
常见的行内块元素 img input button
尺寸与边框
1 尺寸
1 属性:
width height 分别设置元素的宽高大小
取值:像素值或是百分比
注意:块元素和行内块元素可以设置宽高属性
2 溢出处理
溢出处理,内容超出元素尺寸范围,称为内容溢出,默认情况下,溢出部分仍然可见
属性:overflow 可以处理内容溢出
取值:
1 visible 默认值,溢出部分仍然可见.
2 scroll 添加滚动条,包含水平和垂直方向,不管该方向有没有发生内容溢出,都显示滚动条
3 auto 自动添加滚动条
4 hidden 隐藏溢出部分
2 边框
1 边框实现:
属性:border
取值:border-width border-style border-color
边框宽度,样式,颜色,三个值缺一不可(即使有些值是默认的)
border-width :取像素值,设置四个方向边框宽度
border-style :边框样式
取值:
solid 实线边框
dashed 虚线边框
dotted 点线边框
doule 双线边框
border-color ;设置边框颜色,取颜色值
注意 :
1 使用border 属性为元素设置边框,是同时设置 上 右 下 左 四个方向的边框
2 取消默认边框,border : none;常用于按钮
2 单边边框的设置
属性:
1 border-top :设置顶部边框
2 border-right :设置右边边框
3 border-bottom :设置底部边框
4 border-left :设置左边边框
取 值:border-width border-style boder-color
3 网页三角标制作:
1 设置空的块元素,宽度为0
2 为元素设置等宽的边框
3 调整边框颜色,显示一个方向的边框,其余边框设置透明边框颜色 transparent
注意:四个方向的边框缺一不可,缺少的话,边框会恢复成矩形边框,不再是三角形
4 轮廓线
属性:outline
取值:width style color
注意:轮廓线围绕在元素内容区域四周,与边框类似,但有区别:轮廓线在网页中不占位,边框在网页中是实际占位的
取消轮廓线:outline:none ;
5 圆角边框
1 属性:border-radius
2 取值:像素值或者百分比
1 border-radius:20px
一个值表示四个角都以20px 做圆角
2 border-radius:20px 40px
取两个值,按照上右下左顺时针方向设置圆角,从左上角开始,依次取值,在给两个值的情况下,上下保持一致,左右保持一致
3 border-radius: 10px 20px 30px ; 三个值,左右角一致,对应的角值是一致
3 百分比取值实现元素形状改变
border-radius;50%;
注意:使用百分比设置圆角边框时,是参照当前元素的尺寸进行计算的
如果元素本身是长方形,设置50%的圆角会变成椭圆
如果元素本身是正方形,会变成正圆
6 盒阴影
属性:box-shadow
取值:
offset-x 阴影的水平偏移距离,取像素值
offset-y 阴影的垂直偏移距离,取像素值
blur 阴影的模糊程序,取像素值,值越在越模糊
spread 阴影的延伸距离(可选),取像素值,可以扩大阴影的范围
color 设置阴影颜色(默认为黑色)
注意:不管是浏览器窗口中还是元素本身,都存在坐标系,都以左上角为(0,0)点,向右,向下代表x 和y 轴的正方向
5 盒模型(框模型)
1 在css中。认为一切元素都是框,都是矩形区域
盒模型:计算元素在文档中的实际占位情况
副模型组成:margin(外边距) border
padding(内边距) content(元素的宽高尺寸)
元素在文档中实际尺寸的计算:
默认情况下:
最终宽度 = 左右外边距+ 左右边框宽度+左右内边距+width
最终高度 = 上下外边距 + 上下边框 + 上下内边距 + height
2 margin
1 margin表示外边距:元素边框与其他元素边框之间的距离
2 取值:像素值
1 .margin :10px
表示设置上右下左四个方向都为10px的外边距
2 margin:10px 20px
表示设置上下外边距为10px,左右外边距为20px;
3 margin:10px 20px 30px;
表示上右下左四个方向上的外边距分别为:
10 20 30 20
4 margin: 10px 20px 30px 40px;
分别设置四个方向的边距值
3 单方向外边距的设置
1 属性:
1 margin-top:上方外边距
2 margin-right:右边的外边距
3 margin-bottom: 底部外边距
4 margin-left:左边外边距
2 取值:像素值
只给当前方向设置外边距,给一个值
4 特殊取值:
1 。margin:0; 设置元素外边距为0 ,常用于初始化页面样式,取消一些元素的默认外边距
2 。margin:0 auto;设置左右外边距自动,用来实现元素的居中效果。auto只对左右外边距起作用
3 。取负值:
会移动元素的位置,负值表示向上向左移动元素,常用于页面元素位置的微调
5 自带默认外边距的元素:
body h1-h6 p ul ol
CSS 样式表{二}的更多相关文章
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS样式表 选择器
1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
- HTML静态网页 css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- 3月22日 html(三)css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...
- HTML——CSS样式表&布局页面
CSS样式表: 一.作用:美化网页,页面布局. 二.分类: 内联,写在body里标签style=""里面的样式,优点是控制精确,可重用性差. 内嵌,嵌在网页的head里面,可重用性 ...
- JavaScript对css样式表操作
CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...
- HTML静态网页(css样式表)
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- css样式表及属性
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- 【2017-03-24】CSS样式表
CSS样式表:层叠式样式表 一.样式表的分类 1.内联式 写在标记的属性位置,优先级最高,重用性最差. 格式: <div style="width:100px;height:100px ...
随机推荐
- Django之model.form创建select标签
前言 之前我们学习了form表单验证用户输入格式和自动创建HTML,那么如果用户创建select标签时怎么办呢,先来看下这个东西: models.py 数据格式: class UserInfo(mod ...
- 基于pythonselect.select模块通信的实例讲解
基于python select.select模块通信的实例讲解 要理解select.select模块其实主要就是要理解它的参数, 以及其三个返回值. select()方法接收并监控3个通信列表, 第一 ...
- Hibernatne 缓存中二级缓存简单介绍
hibernate的session提供了一级缓存,每个session,对同一个id进行两次load,不会发送两条sql给数据库,但是session关闭的时候,一级缓存就失效了. 二级缓存是Sessio ...
- 修改NGUI 3.11 的控件 inputfileld hide input 属性bug
1.勾选hideinput属性后,输入中文,会出现,无法显示的问题. 2.勾选hideinput属性后,密码框会出现第一个字母被吃掉的问题 解决方案:控件都不要勾选hideinput属性,代码做如下修 ...
- 【c# 学习笔记】使用新成员隐藏基类成员
如果想在派生类中定义与基类成员同名的成员,则可以使用new关键字把基类成员隐藏起来. 如果不适应new关键字,在派生类中定义一个与基类成员同名的成员,编译器将产生警告信息,如下代码演示: public ...
- laravel 小知识点
分块导出brokerageCharge = DB::table('表名')$brokerageCharge = $brokerageCharge->chunk(100,function($bro ...
- charles 文件菜单总结
本文参考:charles 文件菜单总结 一.file(文件菜单) 需要注意的是 "导入"和"导出"这个功能在和别人沟通的时候用, 比如你向第三方工具/类库开发人 ...
- CF C.Ivan the Fool and the Probability Theory【思维·构造】
题目传送门 题目大意: 一个$n*m$的网格图,每个格子可以染黑色.白色,问每个格子最多有一个相邻格子颜色相同的涂色方案数$n,m<=1e5$ 分析: 首先,考虑到如果有两个相邻的格子颜色相同, ...
- 用gcd库函数求最大公约数
如何直接调用库函数来求最大公约数呢? 1.首先看怎样求两个数的最大公约数 要注意gcd()前面是两个“_” !!! #include<bits/stdc++.h> using namesp ...
- java多线程上篇(二) -- 进程的控制、同步
一.进程的控制 进程的基本数据信息是操作系统控制管理进程的数据集合,这些信息就是用来控制进程的,此处我们说的进程控制就是进程的管理. 比如进程有状态,那么进程的创建.终止,状态的切换,这都不是进程自主 ...