5.前端CSS之基本属性(长宽,字体,文体,背景图片,阴影,border画圆,display)

1.块儿标签长宽height,width块儿标签可以设置长宽，设置长宽后依然独占一行    h1-h6，p，div行内标签无法设置长宽 写了 也不会生效           i，u，s，b  span2.字体样式：font-family:"微软雅黑";大小：font-size: 26px;                通常12，14，16，38，48深浅：font-weight: bolder;            加粗font-weight:lighter;           浅色(细)font-weight:00~900             值font-weight:inherit            继承父元素的粗细值颜色:color:red;                      直接写color:#eeeeee;                   写颜色编号color:rgb(128,23,45);            三基色 数字  范围0-255color:rgba(23, 128, 91, 0.9);    第四个参数是颜色的透明度 范围是0-1取颜色工具：vscode下的VS Color Picker插件或者微信/QQ截图3.文体align/decoration/indent：排列(align)：text-align: center;      居中text-align: right;       左对齐text-align: left;        右对齐text-align: justify;     两端对齐装饰(decoration)text-decoration: underline;     下划线text-decoration: overline;      上划线text-decoration: line-through;  删除线text-decoration: none;          取消任何文体线，多用在a标签做跳转标题样式（a标签文体默认带下划线）缩进(indent)font-size: 16px;                先定字大小text-indent: 32px;              缩进32px4.背景background(1)背景颜色background-color: red;背景图片(2)图片背景background-image: url("图片路径");  默认要全部铺满平铺repeat:background-repeat: repeat;     平铺background-repeat: no-repeat;  不铺background-repeat:repeat-x;    x轴平铺background-repeat:repeat-y;    y轴平铺位置position：background-position:center center;  第一个距离左  第二个距离上，可以用px或%以上可以一起简写：background: red url("图片路径") no-repeat center center;   位置先后顺序不影响（******）补充：background-attachment:fixed;背景图像相对于窗体固定background-size: cover;     把背景图片放大到适合元素容器的尺寸，图片比例不变5.块儿标签阴影设置：(1)语法：box-shadow: h-shadow v-shadow blur spread color inset;h-shadow    必需的。水平阴影的位置。允许负值v-shadow    必需的。垂直阴影的位置。允许负值blur        可选。模糊距离spread       可选。阴影的大小color       可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表inset     可选。从外层的阴影（开始时）改变阴影内侧阴影(2)例子：box-shadow:5px 5px 5px rgba(0,0,0,0.5)6.边框border(1)上(top)下(bottom)左(left)右(right)都有宽度(width)颜色(color)样式(style)，如：border-left-width: 5px;border-left-color: red;border-left-style: dotted;  点solid    实线dashed   虚线(2)以上可以简写bolder:3px solid red;  三者位置随意写(3)画圆：height: 400px;      先设区域长宽width: 400px;border-radius: 50%;  直接写50%即可 长宽一样就是圆 不一样就是椭圆可以填四个参数，默认左上 右上 右下 左下顺序7.显示:display属性display:none;            隐藏标签不展示到前端页面并且原来的位置也不再占有了display:inline;          将标签设置为行内标签的特点(通常用在div)display:block;           将标签设置成块儿级标签的特点(通常用在span)display:inline-block;    标签即可以在一行显示又可以设置长宽(块儿行内特点都有)补充：display:none;       不展示位置也不再占有visibility:hidden;  不展示位置还在

5.前端CSS之基本属性(长宽,字体,文体,背景图片,阴影,border画圆,display)相关推荐

web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
css 全屏显示一张图片_css3背景图片全屏显示的例子
背景图片全屏这个功能只需要定义重复即可解决了当然这个是有一些技巧了,下面我们就来看一篇关于css3背景图片全屏显示例子了,具体的如下所示. 如何用css背景图片拉伸以及100% 满屏显示呢?这个问题 ...
用css和js的的方法打印背景图片
在项目中,当要实现将前端背景进行打印的时候,当我们点击打印时,可能会出现如下情景(如图所示): 即要勾选背景图片的时候才能够将背景进行打印,对于客户端来说显然是不友好的 (不排除部分用户并不知道在哪进 ...
php 如何给字体加颜色,怎么给字体加背景图片？如何给文字填充图片背景色？怎么给字体加背景图片？文字加背景图...
下了两天的雨,今天终于放晴了,而且还是阴天的天气,有微风,没有热辣的太阳,这让小编不禁感到了一股秋的凉意呢~啊哈哈哈,好啦,还是不说废话了,来看看今天的教程方案吧!平时我们制作纯文字的图片画面,文字的 ...
html背景图适应div_体验css+div 之三种使网站背景图片自动适应浏览器大小的方法...
不管你怎么变化浏览器窗口大小,背景图始终会自动调节大小. 1 . 第一次方法: 我第一个想法是需要使用一个 css 背景图,如果这张图够大,就能填充整个屏幕.当浏览器窗口大小没有图片大时,它将自动隐藏 ...
css 网站大背景（按比例缩放背景图片）
很多网站是全背景图片的,而且适应各种主流分辨率,给人一种干净大气的感觉,实属设计派的一个耍酷良方,下面介绍几种实现全屏图片自适应缩放背景图片的方法. 1.帅气简单的CSS3方法 html {backg ...
matlab 改变图片的长宽,Matlab怎么调整图片的大小，使它成为特定的长宽
满意答案 whymhm 推荐于 2017.12.15 采纳率:53% 等级:6 已帮助:2557人一般而言,只需对目标图像进行图形句柄对象和坐标轴句柄对象进行操作即可.MATLAB中分别用gc ...
CSS实现鼠标经过div时改变背景图片
很多时候我们都能够看到,当我们用鼠标滑过div时,div的背景将会变成另外一个图片.下面我就将实现该功能的代码分享出来,希望能够帮助到大家. .biankuang {height: 126px;wid ...
CSS笔记（五）盒子模型-----背景图片
一.背景 1.背景颜色 background-color: ; 关于背景颜色有一个值为 opacity opacity属性指定元素的不透明度/透明度.取值范围为 0.0 - 1 ...

5.前端CSS之基本属性(长宽,字体,文体,背景图片,阴影,border画圆,display)

5.前端CSS之基本属性(长宽,字体,文体,背景图片,阴影,border画圆,display)相关推荐

最新文章

热门文章