字体、盒模型和高级选择器

字体

font-family:字体类型;可以写多个,浏览器识别的第一个;
“Microsoft Yahei(微软雅黑),SimSun(宋体),SimHei(黑体)”

  

字体大小

font-weight:字体粗细;bold加粗;bolder更粗;lighter更细;400等同于normal;700相当于bold;
font-style:斜体;normal正常;italic斜体;oblique倾斜(这两个斜体在浏览器看上去相同)

  

字体颜色

十六进制的颜色值 #ff0000 缩写#f00
RGB值:rgb(255,0,0)

  

盒模型

margin:外边距

margin-top(顶部)
margin-left(左边)
margin-bottom(中间)
margin-right(右边)

外边距合并:当两个垂直外边距相遇时,它们将形成一个外边距,可以使用padding或border分开两个外边距。

内边距:padding

padding-toppadding-left
padding-bottom padding-right
border:边框;
border-width:宽度;
border-style:solid(实线)dotted(点线)dashed(虚线)double(双线)

  

四个值的顺序:上 右 下 左

高级选择器

通配符选择器;*{font-size:12px;}
选择器分组:div,p{}
后代选择器: div a{};
子选择器 div>a{};
相邻兄弟选择器div+p{};
伪类选择器a:hover{}

  

font-family:字体类型;可以写多个,浏览器识别的第一个;
“Microsoft Yahei(微软雅黑),SimSun(宋体),SimHei(黑体)”  

原文地址:https://www.cnblogs.com/wangzihao147/p/11984663.html

时间: 2024-10-08 05:13:46

字体、盒模型和高级选择器的相关文章

关于盒模型的 盒子模型 、 浮动 、 定位以及高级选择器的使用

盒模型的基本组成包括:外边距(margin)内边距(padding) 边框(border)元素(element,content) 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者.这种现象被称为相邻块元素垂直外边距的合并( 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,

Python-ccs高级选择器 盒模型

css高级选择器与盒模型 脱离文档流 ,其中就是产生了BFC 1.组合选择器 - 群组选择器 /* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */ div, #div, .div {color: red} - 后代(子代)选择器 .sup .sub { 后代,sup一定是sub的父代(不一定是父集,sub就是被sup直接嵌套) } .sup > .sub {子代} - 兄弟(相邻) 选择器 .up ~ .down {兄弟} .up + .down {相邻} - 交集选

层叠和继承的概念,选择器的优先级,盒模型,元素在页面上的定位体系,常规流

1.层叠和继承的概念: CSS层叠性是指CSS样式在针对同一元素配置同一属性是,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠. 继承:子元素会自动拥有父元素的某些CSS属性,通常来说,文本类的属性会被继承(字体.字号.颜色) 2.选择器的优先级 !important>id选择器>类选择器>标签选择器>子选择器>后代选择器>伪类选择器 3.盒模型 在网页中,一个盒子占有空间的大小由几个部分构成

【CSS】盒模型+选择器(你选择的要操作的对象)

盒模型 转http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 1.w3c标准的盒模型和ie的盒模型主要差别在于content的width和height是否包含border padding 2.标准的content是不包含border padding的 3.如何让ie也标准起来,加上<!doctype html> -------- 选择器 转http://www.cnblogs.com/yongzhi/articles/12

web前端——html基础笔记 NO.13{盒模型,颜色值,字体的缩写}

盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在margin和padding的例子如下: margin:10px 15px 12px 14px;/*上设置为10px.右设置为15px.下设置为12px.左设置为14px*/ 通常有下面三种缩写方法: 1.如果top.right.bottom.left的值相同,如下面代码: margin:10px 10px 10px 10p

DAY46-前端入门-组合选择器、标签a_img_list、盒模型、伪类、盒模型布局

目录 一.组合选择器 群组选择器 子代选择器 后代选择器 相邻选择器 兄弟选择器 交集选择器 组合选择器的优先级 二.属性选择器 三.盒模型 盒模型概念 盒模型成员介绍 四.边界圆角 单角设置 整体赋值 五.常用标签 超连接标签a 图片标签img 列表标签list 六.伪类选择器 a标签的四大伪类 内容伪类 索引伪类 取反伪类 七.盒模型布局 做页面必备reset操作 盒模型布局基本介绍 display:显示方式 兄弟坑 父子坑 解决方案 一.组合选择器 群组选择器 可以将任意多个选择器分组到一

盒模型的属性/display显示(重要)/浮动(重要)

一.关于上篇博客的总结 1.高级选择器: (1).后代选择器***** 选择的是儿子,孙子,重孙子 div p{} (2).子代选择器 选择的是亲儿子 div>p (3).组合选择器 div,p,a,span{} (4).交集选择器 div.active{} (5).属性选择器 input[type="text"]{} (6),伪类选择器 爱恨准则 a:link{} a:visited{} a:hover{} a:active{} 对a来设置字体颜色,一定要选中a (7).伪元素

CSS3实战开发: 弹性盒模型之响应式WEB界面设计

各位网友大家好,如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示,相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像. 从本篇文章开始,我将带领大家,手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面.同时实战开发中的案例代码可以作为你项目中的精简框架了. 当你学习完成<CSS3实战开发: 弹性盒模型之响应式WEB界面设计>这个系列教程之后,相信你对目前比较流行的前端轻量级框架 Bootstrap等会有一个深刻的认识. Bootstrap(弹性流体布

从零开始学_JavaScript_系列(16)——CSS&lt;3&gt;(文本、对齐、圆角、盒模型、背景)

注意,有些CSS属性对于低版本浏览器(典型的就是IE),可能不支持,所以在面向低版本浏览器的时候需要注意的说. 关于CSS属性的兼容性检测的网站:http://caniuse.com/ 部分图片来自网易云课堂,侵.私信.删 (34)文字字体 ①font-size:文字大小 ②值有:length(具体值).absolute-size(绝对值,用的少).relative-size(相对值,用的少).percentage(百分比) length:如15px(15px大小),2em(相对父元素属性的2倍