CSS设计指南

最新推荐文章于 2023-09-11 21:46:37 发布

海若Hero

最新推荐文章于 2023-09-11 21:46:37 发布

阅读量201

点赞数 2

本文链接：https://blog.csdn.net/weixin_44569783/article/details/86624065

版权

1.1 CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

image.png

1.1.1 字体属性：

属性含义属性值

font-family 字体 各种字体

font-style 字体样式 italic、oblique

font-variant 小体大写 small-caps

font-weight 字体粗细 bold、bolder、lighter…

font-size 字体大小 absolute、relative、%

color 字体颜色 颜色值

1.1.2 颜色与背景属性：

属性含义属性值

Color 颜色  颜色值

Background-color 背景色  颜色值

Background-image 背景图案  图片路径

Background-repeat 背景图案重复方式 Repeat-x | repeat-y | no-repeat

Background-attachment 背景的滚动 Scroll | fix

Background-position 背景图案初始位置 % | n em | top | left | right | bottom

1.1.3 文本属性:

属性含义属性值

word-spacing 单词间距 n em

letter-spacing 字母间距 n em

text-decoration 装饰样式 underline| overline| line-through| blink

vertical-align 垂直方向位置 sub| super |top |text-top| middle| bottom| text-bottom

text-transform 转为其他形式 capitalize| uppercase| lowercase

text-align 对齐 left| right| center| justify

text-indent 缩进 n em| %

line-height 行高 pixels、n em、%

1.1.4 边距属性:

属性含义属性值

margin-top 上边距 n em | %

margin-right 右 n em | %

margin-bottom 下 n em | %

margin-left 左 n em | %

1.1.5 边框属性:

属性含义属性值

Border-top-width 上边框宽度 n em | thin | medium | thick

Border-right-width 右 同上

Border-bottom-width 下 同上

Border-left-width 左 同上

Border-width 四边 同上

Border-color 边框颜色 Color

Border-style 边框样式 Dotted | dash | solid | double | groove | ridge | inset | outset

Border-top|right|bottom|left 上(右|底|左)所有属性 Border-width | border-style | color

1.1.6 图文混排:

属性含义属性值

Width 宽度 n em | %

Height 高度 n em

Float 文字环绕 Left | right

clear 去除文字环绕 Left | right | both

1.1.7 列表属性:

属性含义属性值

Display 是否显示 Block | inline | list-item | none

White-space 空白部分 Pre | nowrap | normal（是否合并)

List-style-type 项目编号 Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none

List-style-image 项目前图片 Img-url

List-style-position 第二行位置 Inside | outside

List-style 全部属性 Keyword | position | url

1.1.8 鼠标属性:

属性值含义属性值含义

Auto 自动 N-resize 上箭头

Crosshair "+" Se-resize 右下

Default 默认 Sw-resize 左下

Hand 手形 S-resize 下箭头

Move 移动 W-resize 左箭头

E-resize 右箭头 Text "I"

Ne-resize 右上 Wait 沙漏

Nw-resize 左上 help 帮助

1.2 CSS选择器

1.2.1 li标签选择器

html:

<li>列表项1</li>（改变标签里的样式类型）

css:

针对所有列表

li{

 color: rgb(255,0,0); /*#ff0000 red*/

  font-size: 30px;

}

1.2.2 类选择器 class（把一堆样式划为一类）

<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;
word-break:break-all">div`.topBar +Tab = <`divclass`=`"topBar"`></`div`>`</pre>

当前页面内可以多个同样 html:

<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;
word-break:break-all"><li  class="blue">`列表项``2`</li></pre>

css:

<pre style="margin-bottom:18.0pt;
line-height:16.5pt;background:#F6F8FA;word-break:break-all">  color:  #0000ff;</pre>

<pre style="margin-bottom:18.0pt;
line-height:16.5pt;background:#F6F8FA;word-break:break-all">  }</pre>

1.2.3 ID选择器 id（也可控制某个DIV样式）

当前页面内唯一id；如果页面内出现多个相同id，虽然可以解析出，但不规范，不建议

<li id="item">列表项1</li>

  #item{

 color: #00FF00;

 font-size:40px;

 }

权重越大，优先级越高，优先级高的覆盖优先级低的

各种选择器可以用在列表li、容器div等中

html:

  <div>这是一个Div</div>

CSS:

 div{

 background-color:  #ccc;

 }

1.3 CSS样式规则

1.3.1 三种定义样式的方法

①****在本文件下的表示方法

  <head>

  <style  type="text/css"> //样式

  选择器（即修饰对象）{ //.g{ }

  对象属性1：属性值1； //font：

  对象属性2：属性值2； //height：50px；

 }

  </style>

  </head>

②在1.css文件中的表示方法

 <link rel="stylesheet"  type="text/css" href="1.css">

③直接跟着定义样式

<div class=" size show show-1"></div>

每个样式间用空格隔开，有三个样式 size、show、show-1

1.3.2 颜色

red = #FF0000 = rgb(255,0,0) 红色

blue = #0000ff = 蓝色

green = #00FF00 = 绿色

 #ccc = #cccccc 灰色

 #fff = #ffffff 白色

black = #333 黑色

background: #fff; 背景为白色

background: #fff; 背景为白色

 cursor: pointer; 当移动到当前位置时（配合li:hover）变成小手

 transition: all 1s ease; 渐变效果（有些浏览器不支持）

 -webkit-transition:all 1s ease;

 -o-transition:all 1s ease;

 -moz-transition:all 1s ease;

 -ms-transition: all 1s ease; 对于不支持的浏览器，解决方案

1.3.3 字体font

 width: 200px;宽度

 font-weight: bold; 字体粗细（粗体）

 font-size: 12px; 字体大小

 color: #ff7300; 字体颜色

 background-color: #ccc; 背景色

 height 高度

width 宽度（可以认为是长度）

font-family：隶书；字体

长度单位：

px 像素

颜色

  十六进制：#ffffff

  颜色名称：red

尺寸属性：

 Height、max_height、min_height

 width、max_width、min_width

字体、字号：

 font 缩写形式

 font-weight 粗细

 font-size 大小

 font-family 字体系列

 font-style 字体样式

字体颜色

 color

 opacity 透明度 css3

行距、对齐等

 line-height 行高

 text-align 对齐

 letter-spacing 字符间距

 text-decoration 文本修饰

 overflow 浮动

 text-overflow

 text-indent

1.3.4 列表宽度决定了列表项宽度

 height: 100px;

 line-height: 100px; 使其上下居中对齐

 text-align: right; 水平对齐方式：水平靠右

 text-align: center; 水平对齐方式：水平居中

 letter-spacing: 10px; 字间距

 text-decoration: none; 下划线设置（去除）

 white-space: nowrap; 设为一行显示

 overflow: hidden;

 display: block; 隐藏多余内容

1.3.5 图片

  background-image: url(images/1.jpg); 插入图片

  background-image: url(../images/1.jpg); 插入上一级文件夹中images文件夹中的图片1.jpg

  background-repeat: no-repeat; 图片默认多大就是多大（不加自动复制显示）

  background-position: 50px 50px; 移动图片（正数为右下角，负数为左上角）

1.3.6 块级元素默认占一行

★float: left; 浮动 将块级元素变为行级元素 让多行在一行  如果一行放不下，自动转第二行

 height: 50px; /*使其上下居中对齐*/

 line-height: 50px; /*使其上下居中对齐*/

 text-align: center; 水平对齐方式：水平居中

 margin-right: 5px; 每个元素间间隔5px

 font-size: 20px; 字体大小

1.3.7 焦点

鼠标移到当前位置时的状态

 a:hover{

 color: red;

 }

 /*鼠标激活选定状态*/

 a:active{

 color: green;

 }

1.3.8 超链接样式的四种状态

  未访问状态 a:link

  已访问状态 a:visited

  鼠标移上状态 a：hover

  激活选定状态 a：active

、

1.3.9 盒子（矩形方框）

margin（外边距/边界）

border（边框）

padding（内边距/填充）

width 宽度

height 高度

margin 外边距/边界

margin：1px 2px 3px 4px 外边距/边界（上右下左）

margin：1px 2px 外边距/边界（上下、左右）

margin：1px 外边距/边界（上下左右、通常表现出来上左）

margin

一个值：4边

两个值：上下、左右

四个值：上右下左

margin-left: auto; 左边距自动

margin-left: auto; /水平居中/

margin-right: auto; /水平居中/

margin: 0px auto; /水平居中，有的浏览器不支持/

默认下，div没有边框border（有颜色）

默认不显示border

border-color: blue;

border-width: 10px;

border-style: solid; 以上三句话使其最终显示 solid实心的

border width style color

border：20px solid green 一句话也可以显示

border-top:30px solid #ccc; 设置上边框属性

padding-top: 20px; 内边距（上）

padding: 20px; 内边距（上下左右）

padding: 20px 50px; 内边距（上下、左右）

对同一属性做设置，后面的优先级高

对外边距/边界设置，一般统一格式，不要上边设下边距，下边设上边距；如果设置，按大的显示

margin-bottom: 30px;

.topbar .search .topabar .link{float:right;} 共用一种样式{浮动 将块级元素变为行级元素}

1.3.10 解决浮动问题，使用尾类

 .fix{*zoom:1;*clear:both;} 

 .fix:before,.fix:after{

 display: table;clear:both;

 content: '';

 }

 <div class="wrap fix"> +fix谁的子元素浮动，就可以清除影响

 .fix{*zoom:1;*clear:both;}

 .fix:before,.fix:after{

 display: table;clear:both;

 content: '';

 }

1.3.11 定位

 position: absolute; 绝对定位

 position: relative; 相对定位

参照物是距离最近定位的父元素

1.3.12 对定位元素显示排序

 z-index: 1; 数字越大，优先级越高

设置鼠标指到哪里，哪里在上边

 .c4:hover{

 z-index: 3;

 }

1.3.13 响应式

viewport

 设备方向：Orientation

 设备方向：Orientation

1.3.14 其他样式

header、footer、center、left、right

头尾中间左右

链接默认带下划线

<div class=" size show show-1"></div>

每个样式间用空格隔开，有三个样式 size、show、show-1

list-style:none; 去除前面的列表序列号

border 边框

border: 1px solid red; 添加边框

<div style="clear: both"></div> 用于消除浮动效果导致的顺序错乱

height 高度

width 宽度（可以认为是长度）

font-family：隶书；字体

 top: 25px; 距离上方25px

 left: 15px; 距离左边15px

display: none;不显示

@media screen and (max-width: 900px){ } 当分辨率小于900px时

line-height: 1.8; 行高

1.4 为CSS单独建立文件（建立链接link）

  <link rel="stylesheet"  type="text/css" href="style.css">

  <link  + Enter

style.css 新建文件

@charset  'utf-8';

tobehero666.png

海若Hero

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS设计指南

1.1 CSS 语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。selector {declaration1; declaration2; ... declarationN }选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribu...
复制链接

扫一扫