首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS基础——css 属性

我们知道 css 我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1....border-right:10px solid green;border-bottom 设置底边边框,如:border-bottom:10px solid pink;padding 设置元素包含的内容和元素边框的距离...margin 设置元素和外界的距离,也叫外边距,如margin:20px;margin是同时设置4个边的,也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right...小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1....小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;

1.5K21
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    css列表属性和样式控制

    如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它。 列表属性 html有三种类型的列表:无序列表,有序列表和自定义列表。...list-style:简写属性,用于把下边三个属性声明到一起。 list-style-type : 属性指定列表项标记的类型(实心圆、空心圆、方框等)。...list-style-type的属性值: none:无标记。 disc:标记实心圆。不设置的时候默认disc。 circle:空心圆。 square:实心方块。 decimal:标记是数字。...list-style-position的属性值 inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。 outside:默认值,保持标记位于文本的左侧。...inherit:从父级继承list-style-position属性值。

    1.2K20

    css列表属性和样式控制

    如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它。 列表属性 html有三种类型的列表:无序列表,有序列表和自定义列表。...list-style:简写属性,用于把下边三个属性声明到一起。 list-style-type : 属性指定列表项标记的类型(实心圆、空心圆、方框等)。...list-style-type的属性值: none:无标记。 disc:标记实心圆。不设置的时候默认disc。 circle:空心圆。 square:实心方块。 decimal:标记是数字。...list-style-position的属性值 inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。 outside:默认值,保持标记位于文本的左侧。...inherit:从父级继承list-style-position属性值。

    1K10

    CSS——属性列表

    -font-language-overridefont-language-override 字体-语言-重写 CSS 属性参数控制特定语言的字体中的字形。...2font-variantfont-variant 属性规定小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。...1font-variant-alternatesfont-variant-alternates 字体变形候补 CSS 属性参数控制替代符号的用法。...3transition-propertytransition-property 规定应用过渡效果的 CSS 属性的名称。(当规定的 CSS 属性改变时,过渡效果将开始)。...3 变形 元素描述版本transformtransform 属性规定元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

    2.5K10

    CSS background属性

    属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: background-color...写完上来几个属性,如果每个都要单独写的话就比较费劲,下面介绍一下如何生成一行。...---- “background: cyan url(bg.png) no-repeat left top;”,背景不重复,背景和盒子左上角对齐,盒子其他部分显示背景颜色“cyan”。 ?...---- “background: cyan url(bg.png) no-repeat left center;”,背景不重复,背景和盒子左中对齐,盒子其他部分显示背景颜色“cyan”。 ?...---- “background: cyan url(bg.png) no-repeat right center;”,背景不重复,背景和盒子右中对齐,也就是背景图片的右边对齐盒子的右边,盒子其他部分显示背景颜色

    1.3K10

    css属性详解

    颜色是通过CSS最经常的指定:   十六进制值 - 如: #FF0000     一个RGB值 - 如: RGB(255,0,0)   颜色的名称 - 如:  red   还有rgba(255,0,0,0.3...display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。...display:"inline-block" 使元素同时具有行内元素和块级元素的特点。...六、css盒子模型 margin:            用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。...padding:           用于控制内容与边框之间的距离;    Border(边框):     围绕在内边距和内容外的边框。 Content(内容):   盒子的内容,显示文本和图像。

    2K101

    CSS外观属性

    line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px 一般情况下,行距比字号大7.8像素左右就可以了。...其属性值可为不同单位的数值,允许使用负值,默认为normal。 word-spacing:单词间距 word-spacing属性用于定义英文单词之间的间距,对中文字符无效。...和letter-spacing一样,其属性值可为不同单位的数值,允许使用负值,默认为normal。 word-spacing和letter-spacing均可对英文进行设置。...颜色半透明(css3) 文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下:    color: rgba(r,g,b,a)  a 是alpha 透明的意思 取值范围 0~1之间    color...: rgba(0,0,0,0.3)   文字阴影(CSS3)  Shadow 影子 text-shadow:水平位置 垂直位置 模糊距离 阴影颜色; ?

    1.1K20

    CSS position属性

    CSS在position位置信息要素用于表示属性。 有三个取值:static, absolute, relative。...1、static:这是表示该元素依照排列和嵌套的顺序和规则应该在的位置,此时设置top,right,left, bottom属性是无效的。...2、absolute:位置參考点是离其近期的配置了position属性值为非static的父节点元素,假设其全部父节点都没有显式配置position属性。则以浏览器窗体的位置为參考。...此时设置top,right,left, bottom属性值有效; z-index属性用于指定三维坐标(x,y,z)中z坐标的值,该值默认是0,能够设置为正数。也能够设置为负数。...注意:该属性必须在元素配置了position属性值至relative/absolute的前提下是有效的。 版权声明:本文博客原创文章。博客,未经同意,不得转载。

    76320

    CSS基础03-CSS字体属性

    03-CSS字体属性 CSS Fonts(字体)属性用于定义字体系列、大小、粗细、文字样式(如斜体等)。 3.1字体系列 CSS使用font-family属性定义文本的字体系列。...不同浏览器可能默认显示的字号不一致,我们应尽量给一个明确值,而不要使用默认大小 同样可以通过给设置字号大小来指定整个页面文字的大小(标题标签除外,需要单独设定) 3.3字体粗细 CSS使用...>和的效果)、bolder(特粗体)、lighter(细体)、number(直接使用数字,不要加单位,相对于单词属性值,数字属性值更推荐使用) 3.4文字样式 CSS使用 font-style属性设置文字样式...,属性值有normal(默认值,多用于取消和标签的斜体),italic(斜体) 注意:我们很少用于给文字加斜体,反而多用于使用normal来取消斜体 3.5字体复合属性 字体属性可以把以上的样式综合来写...,必须按照上面语法格式中的顺序来写,不可以更换顺序,并且各个属性值之间用空格相隔 不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family,否则font属性将不起作用

    1.9K20

    The jQuery UI CSS Framework

    jQuery UI提供了一个强大的CSS Framework,为用户定义使用jQuery widgets。其中的ThemeRoller更是让你随心所欲地操作设计不同风格的网页界面。...jQuery UI是一套基于jquery构建具有皮肤更换功能的UI控件和鼠标交互组件。用于帮助开发人员构建具有良好用户体验的Web应用程序。...filamentgroup 创建的一个jQuery日期排列插件,使用jquery UI 和 jQuery UI CSS Framework创建而成.并且支持ThemeRoller来方便的进行样式化。...Pines Notify jQuery Plugin:好看易用的jQuery消息提示插件 The jQuery UI CSS Framework – Part 1: Intro and How To...Style a Button The jQuery UI CSS Framework – Part 2: How To Create Widget-style Boxes 前端技术:http://www.cssrain.cn

    2.3K60

    前端学习笔记之CSS属性设置 CSS属性设置

    单位是像素 (0px 0px) 或任何其他的 CSS 单位。  如果只设置了一个值,另一个值就是50%。  可以混合使用%和position值。...但其实一次请求的带宽就足够容纳10张图片的大小 精灵图的作用就是用来较少请求次数,以及降低服务器处理压力 #3、如何使用CSS精灵图 CSS的精灵图需要配合背景图片和背景定位来使用...1、盒子模型的宽度和高度 #1、内容的宽度和高度 通过标签的width和height属性设置 #2、元素的宽度和高度 宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距...css显示模式:块级、行内、行内块级 在HTML中HTML将所有标签分为两类,分别是容器级和文本级 在CSS中CSS也将所有标签分为两类,分别是容器级是块级元素和行内元素 #1、HTML中容器级与文本级...CSS显示模式转换 属性 描述 值 display 可以通过标签的display属性设置显示模式 block 块级inline 行内inline-block 行内块级 4、div与span 布局都是用块级元素

    5.9K30

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券