CSS层叠样式表2

一    常见属性

1.1   颜色属性

color属性定义文本的颜色

color:green

color:#ff6600

color:#f60(简写式)

color:rgb(255,255,255)    红(R).绿(G).蓝(B)每个的取值范围0-255

color:rgba(255,255,255,1)    RGBA是代表Red(红色).Green(绿色).Blue(蓝色)和Alpha的(色彩空间)透明度

1.2   字体属性

1.2.1    font-size   字体大小

font-size:14px

1.2.2   font-family   定义字体

font-family:微软雅黑,serif;

可以使用","隔开,以确保当字体不存在的时候直接使用下一个

1.2.3   font-weight   字体加粗

normal(默认值).bold(粗).bolder(更粗).lighter(更细)

100.200.300-900     400=normal,而700=bold

1.3   背景属性

1.3.1   背景颜色   background-color

1.3.2   背景图片   background-image

background-image:url(图片路径)

background-image:none

1.3.3   背景重复   background-repeat

repeat   重复平铺满

repeat-x   向X轴重复

repeat-y   向Y轴重复

no-repeat   不重复

1.3.4   背景位置   background-position

横向(left,center,right)

纵向(top,center,bottom)

1.3.5   简写方式

background:背景颜色  url(图像)重复 位置

background:#f60  url(images/bg.jpg)no-repeat top center

1.4   文本属性

1.4.1   text-align   横向排列   left,center,right

1.4.2   line-height   文本行高

%基于字体大小的百分比行高

数值来设置固定值

1.4.3   text-indent   首行缩进

1.4.4   letter-spacing   字符间距

normal   默认

length   设置具体的数值(可以设置负值)

inherit  继承

1.5   边框属性

1.5.1   边框风格   border-style

1.5.1.1   统一风格(简写风格)   border-style

1.5.1.2   单独定义某一方向的边框样式

border-bottom-style   下边边框样式

border-top-style   上边边框样式

border-left-style   左边边框样式

border-right-style   右边边框样式

1.5.1.3   边框风格样式的属性值

none   无边框

solid   直线边框

dashed   虚线边框

dotted   点线边框

double   双线边框

groove   凸槽边框

ridge   垄状边框          依托border-color的属性值

inset   inset边框

outset   outset边框

inherit   继承

1.5.2   边框宽度   border-width

1.5.2.1   统一风格   border-width

1.5.2.2   单独风格

border-top-width   上边边框宽度

border-bottom-width   下边边框宽度

border-left-width   左边边框宽度

border-right-width   右边边框宽度

1.5.2.3   边框宽度的属性值

thin   细边框

medium   中等边框

thick   粗边框

px   固定值的边框

inherit   继承

1.5.3边框颜色   border-color

1.5.3.1   统一风格   border-color

1.5.3.2   单独风格

border-top-color   上边边框颜色

border-bottom-color   下边边框颜色

border-left-color   左边边框颜色

border-right-color   右边边框颜色

1.5.3.3   属性值

颜色值的名称   red.green

RGB   rgb(255.255.0)

RGBA   rgba(255.255.0.0.1)

十六位进制   #ff0.#ff0000

继承   inherit

1.5.3.4   属性值的四种情况

一个值:border-color:(上.下.左.右)

两个值:border-color:(上下)(左右)

三个值:border-color:(上)(左右)(下)

四个值:border-color:(上)(右)(下)(左)

1.5.3.5   简写方式   border:solid  2px  #f60

1.6   列表属性

1.6.1   标记的类型   list-style-tyle

none   无标记

disc   默认,标记是实心圆

circle   标记是空心圆

square   标记是实心方块

decimal   标记是数字

decimal-leading-zero   0开头的数字标记(01,02,03,等)

lower-roman   小写罗马数字(i,ii,iii,iv,v等)

upper-roman   大写罗马数字(I,II,III,IV,V等)

lower-alpha   小写英文字母The  marker  is  lower-alpha(a,b,c,d,e,等)

upper-alpha   大写英文字母The  marker  is  upper-alpha(A,B,C,D,E,等)

lower-greek   小写希腊字母(alpha,beta,gamma,等)

lower-latin   小写拉丁字母(a,b,c,d,e,等)

upper-latin   大写拉丁字母(A,B,C,D,E,等)

hebrew   传统的希伯来编号方式

armenian   传统的亚美尼亚编号方式

georgian   传统的乔治亚编号方式(an,ban,gan,等)

cik-ideographic   简单的表意数字

hiragana   标记是:a,i,u,e,o,ka,ki,等。(日文片假名)

katakana   标记是:A,I,U,E,O,KA,KI,等。(日文片假名)

hiragana-iroha   标记是:i,ro,ha,ni,ho,he,to,等。(日文片假名)

katakana-iroha   标记是:I,RO,HA,NI,HO,HE,TO,等。(日文片假名)

1.6.2   标记的位置   list-style-position

inside   列表项目标记放置在文本以内,且环绕文本根据标记对齐

outside   默认值,保持标记位于文本的左侧,列表项目放置在文本以外,且环绕文本不根据标记对齐

inherit   规定应该从父元素继承list-style-position属性的值

1.6.3   设置图像列表标记   list-style-image

URL   图像的路径

none   默认,无图形被显示

inherit   规定应该从父元素继承list-style-image属性的值

1.6.4   简写方式   list-style

list-style:square  inside  url(‘/i/arrow.jpg‘)

时间: 2024-10-19 00:34:09

CSS层叠样式表2的相关文章

CSS层叠样式表

层叠样式表     Cascading Style Sheet 一.层叠样式表的分类:1.外部——.css文件2.内嵌——<head></head>3.内联——放在标记的style属性上 优先级为:内联>内嵌>外部 二.选择器.(一)基本选择器1.ID选择器:#2.class选择器:.3.标签选择器:标签名 优先级为:#>.>标签名 (二)组合选择器1.用逗号隔开.并列关系2.用空格隔开.后代关系.3.筛选:选择器.class选择器.

HTML CSS 层叠样式表 一

CSS,全拼Cascading Style Sheets,层叠样式表,用于控制html<body>的元素的样式和布局. 一.CSS的三种引用方式 1.内嵌 <div style="width:200px;height:200px;color:red;background-color:blcak"></div> 内嵌 样式为宽200像素,像素必须加px或者em或者百分比:宽度为200像素:字体颜色为红色:背景颜色为黑色:可以无限添加属性,用分号;隔开.

CSS层叠样式表(一)

一.css含义 层叠样式表,用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.CSS目前最新版本为CSS3. 二.几种样式控制方式(就近原则) 1.行内样式 <body> <div style="color:red;"></div> </body> 2.内联样式 <head> <title>这是内联样式</title> <style type="text/css"

实验时css层叠样式表不更新的情况

自定义了CSS的样式,希望在页面中起作用.因为MVC中Views/Shared/_Layout.cshtml是所有试图的公共文件,如下: <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet"

CSS层叠样式表01

CSS(Cascading Style Sheets)层叠样式表 用于修饰HTML标签的样式 CSS注释 一般来说,CSS是一个独立的文件,由于它的内容是修饰HTML标签的样式,为了方便后期的维护和修改,所以我们人为使用注释说明当前样式的是用于修饰什么内容的 单行注释:/*注释文本*/ 多行注释:就是在单行注释中换行即可 /* 注释1 注释2 */ 养成习惯 /*这是首页的css样式文件(说明css文件的作用)*/ /*页面通用样式*/ /*顶部导航条样式*/ /*侧边菜单栏样式*/ CSS语法

CSS层叠样式表导读

1.1CSS层叠样式表导读: 能够说出什么是CSS 能够使用CSS基础选择器 能够设置字体样式 能够设置文本样式 能够说出CSS的三种引入方式 能够使用Chrome调试工具调试样式 目录: CSS简介 CSS基础选择器 CSS字体属性 CSS的引入方式 综合案例 Chrome调试工具 原文地址:https://www.cnblogs.com/GZ1215-228513-Chichy/p/12232095.html

HTML CSS 层叠样式表 二

一. #ID{ width:宽度px; height:高度px; background-color:red;      背景颜色的两种加法 background:rgba(x,x,x,x)  rgba颜色 最后一个值为透明度 1为不透明,0为全透明. background:url(图片.jpg) np-rereat; 背景图添加 repeat是平铺 background-image:url(图片.jpg); 背景图添加 background-size;100%; 背景图拉伸100%  几乎不会用

HTML CSS 层叠样式表 四

一.页面布局:div+css布局 1.<style > *{ margin:0px; padding:0px; } #ad{ width:100px; height:100px; background-color:red; position:fixed;       定位:固定定位,需要设置距离边框的距离:相对于浏览器窗口位置固定 right:0px; top:100px; } .class{ float:left;     流式布局:从左往右.right从右往左.如果有序号,也会从右往左排.

CSS层叠样式表的理解(一)

使用css时,很多的问题都出现在盒子模型,所以要深刻理解盒子模型,才能够做好css. 盒子模型: margin:外边距 与父亲标签的content边界之间的距离(可以认为content边界位置存在,但不占任何像素) border:边框 标签自身的边框的粗细 padding:内边距 标签与自己的子元素(孩子标签)的content边框的距离 content:数据 content的边框,数据的位置,不占任何像素,但位置确实存在. [不占任何像素,位置确实存在,这句话可以这么理解,当div标签中没有任何

CSS 层叠样式表

语法: 层叠样式表有着简单的语法并且使用一些英语关键词来指定各种样式属性的名字.一个样式表包括一系列规则.每个规则或者规则集包含一个或多个选择器和一个声明块. 选择器 在层叠样式表中,选择器经常用来声明部分标记样式,而这些标记样式通过匹配的标签和属性来运用到标签样式自身.选择器可以运用在: 所有指定类型的元素,例如, 第二级头标签 h2 由属性指定的元素,特别是 id:文档中独一无二的标识符 class:文档中独一无二的多元素组. 在文档数中,元素依赖其他元素的相对位置 类和ID都是大小写敏感的