php学习之css常用的属性(三)

(adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-6940460185323525", enable_page_level_ads: true });

1.文字属性

属性名

描述

属性值

font-size

文字大小

像素(px)、em(倍数)、百分百(%)

font-family

字体类型

宋体、微软雅黑、黑体等 值可以是一个也可以是多个,用英文逗号隔开 目的就是检索你的电脑字体,有哪个就用哪个,没有就默认字体

font-style

斜体

italic(斜体)

font-weight

加粗

bold(加粗)、数字(100-900)

案例:

2.文本属性

属性名

描述

属性值

color

文本颜色

有3种,rgb、十六进制、单词

text-align

文本水平对齐方式

left、center、right     必须在块元素中

text-decoratione

文本修饰符

underline(下划线)、overline(上划线)、line-through(删除线)、none(无-在超链接中默认有下划线,用none去除下划线)

line-height

行高

设置当前行的高度,目的就是让文本上下居中,高度和行高一致

text-indent

首行缩进

数值(px),基本是字体大小的二倍

letter-spacing

字符间距

数值(px)

word-spacing

单词间距

数值(px)

案例:

3.尺寸大小

说明:其实就是元素的宽和高,任何的标记元素都有宽和高

属性名

描述

属性值

width

像素(px)、百分百(%)

height

像素(px)、百分百(%)

注意:块元素都可以设置宽和高,行内元素设置的宽和高不起作用,一般不设置高度,让内容自动撑出来

案例:

4.列表属性

说明:对ul、ol、li、dl、dt、dd、进行样式的修改

属性名

描述

属性值

List-style-type

列表的符号样式类型

None(无)

List-style-image

列表图片

Url地址   如:list-style-image:url(./li01.jpg)

List-style-position

列表符号的位置,只对li用

Inside(内)、outside(外)

List-style

把三个属性的值都写到一个属性中

None  url  inside 如果三个属性都有那就按照上面的顺序,如果那个没有可以不写,如:none url

案例:

tip:边框

border:粗细  样式  颜色;如border:1px dashed red;

border-bottom:下边框

5.背景属性

属性名

描述

属性值

background-color

背景颜色

rgb、十六进制、单词

background-image

背景图片

url地址。如url(./xxx.png)

background-repeat

平铺方式

no-repeat(不平铺)、repeat-x(x轴平铺)、repeat-y(y轴平铺)

background-position

背景定位

x轴定位和y轴定位。如:position:lift top;设置左右和上下

定位方式: 单词定位方式:left、center、right      top、center、bottom单词定位可以理解为一个九宫格 像素定位方式:background-position:50px 100px; 离左边50像素,离上边100像素,只能是离左和离上 百分比方式:background-position:10% 20%; 离左边百分之3,。。离上边百分之20 4,混合方式:background-position:left 100px

backgrpund-attachment

背景固定

scroll(滚动-默认)、fixed(固定)

List-style-position

列表符号的位置,只对li用

Inside(内)、outside(外)

background

简写形式

颜色、图片 、平铺方式、 定位、固定,其中的选项可能没用

  1. 单词定位方式:left、center、right      top、center、bottom单词定位可以理解为一个九宫格
  2. 像素定位方式:background-position:50px 100px; 离左边50像素,离上边100像素,只能是离左和离上
  3. 百分比方式:background-position:10% 20%; 离左边百分之3,。。离上边百分之20
  4. 4,混合方式:background-position:left 100px

backgrpund-attachment 背景固定 scroll(滚动-默认)、fixed(固定) List-style-position 列表符号的位置,只对li用 Inside(内)、outside(外) background 简写形式 颜色、图片 、平铺方式、 定位、固定,其中的选项可能没用

案例:

<style type="text/css">

body{background-color:red}

div{

width:500px;

 

margin:0px auto;

padding:20px;

background-image:url(./64.jpg);

background-attachment:fixed;/*背景固定fixed,scroll滚动*/

background-repeat:repeat-x;/*平铺方式no-repeat不平铺、repeat-x水平平铺、repeat-y纵向平铺*/

background-position:50px 20%;/*背景定位,可以是数字,百分比,字母、混合*/

}

  </style>

精灵图:

说明就是吧很多小图片放入一个大的图片背景中,这个图就称为“精灵图”

在制作网站时只要精灵图必须是背景才能设置

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件开发

CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档。 一、阴影 1....

35150
来自专栏葡萄城控件技术团队

深入CSS,让网页开发少点“坑”

 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的困惑与不解,本文详细讲解了CSS中优先级和Sta...

20190
来自专栏lzj_learn_note

前端开发学习──CSS(1)

HTML 标签原本被设计为用于定义文档内容,但随着HTML的 发展,为了满足页面设计的更多要求,HTML增加了许多的显示功能,导致HTML变得越来越杂乱,页面也...

13610
来自专栏前端技术总结

CSS基础:block,inline和inline-block

css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block、inline和inline-block。

3.1K1050
来自专栏cnblogs

CSS3新特性应用之结构与布局

一、自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,...

23190
来自专栏LeoXu的博客

借助 iText 用代码在 PDF 中创建空白签名域

15420
来自专栏栗霖积跬步之旅

CSS-笔记1-选择器与文本元素

知识点一: CSS概念:CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)  Css是用来美化html标签的,相当于页面化妆。...

20750
来自专栏云端架构

【云端架构】前端必备“层叠样式表”精选

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD

444130
来自专栏企鹅号快讯

HTML5&CSS3初学者指南(4)–Canvas使用

问题:我怎么才能收到你们公众号平台的推送文章呢? 介绍 传统的HTML主要用于文本的创建,可以通过标签插入图像,动画的实现则需要第三方插件。在这方面,传统的HT...

22580
来自专栏flutter开发者

自定义View案例【CircleProgressBar】

在前面的文章中我们看了下如何通过自定义View简单实现了labelView的效果,其实实现起来非常的简单,就是根据用户传递来的参数来做不同的绘制而已。

25520

扫码关注云+社区

领取腾讯云代金券