css(cascading stylesheet language)的总结
来源:互联网 发布:rxjava gson解析数组 编辑:程序博客网 时间:2024/06/08 16:31
一、样式的三种声明方式
行内样式(标签style属性) 直接利用的style属性
内联样式(头部style标签) 利用head里面的style双标签
外联样式(加载外部文件) 通过引入外部的css文件
<link rel="stylesheet" type="text/css" href="**.css" />
二、css语法特点
名字{属性:属性;}
注释:/*注释内容*/
三、常用的选择器
class选择器 .class名{}
id选择器 #id名{}
标签选择器 标签名{}
层级选择器 名字a 名字b 名字c{}
组合选择器 名字1,名字2,名字3{}
通配符 *{}
伪类选择器 父类 第一个子标签:nth-child(这里填写数字) 如:
.all div:nth-child(5) 这里的数值填写你要修饰的那个位置,是整体的位置
{ 不管是什么标签,反正是总体的位置
color:red;
}
.all p:nth-child(1)
{
color:blue;
}
<div class="all">
<p>我是检测伪类选择器5</p>
<div>我是检测伪类选择器1</div>
<div>我是检测伪类选择器2</div>
<div>我是检测伪类选择器3</div>
<div>我是检测伪类选择器4</div>
</div>
同时给多个a标签的四个属性设定不同的值
a标签的名字:link{
}
a标签的名字:visited{
}
a标签的名字:hover{
}
a标签的名字:active{
}
属性选择器 input[type="text/css"]{}
四、尺寸
width: 宽度
height: 高度
min-height: 最小高度
max-height: 最大高度
min-width: 最小宽度
max-width: 最大宽度
五、单位
em 根据父级字体调节
rem 根据html字体调节
% 百分比
px 像素
vw 根据窗口的宽度
vh 根据窗口的高度
六、字体
font-style(normal italic oblique inherit)定义字体的风格
font-weight 定义字体是否加粗
font-size 定义字体的大小
font-family 定义字体的字体
font:style weight size family(简写形式,顺序不能变 且size family不能省略)
七、文本
text-indent 文本的缩进
text-align 文本的水平对齐方式
text-overflow 当文本超出指定区域后怎么处理
clip 修剪文本
ellipsis 用省略号来代替被剪的文本
string 给定的字符来代替被剪的文本
text-decoration 文本的下划线
none 默认
underline 下划线
overline 文本头上
line-through 贯穿文本
blink 定义闪烁的文本
inherit 从父类继承
text-shadow(h-shadow v-shadow blur color)文本的阴影
h-shadow 水平阴影的位置
v-shadow 垂直阴影的位置
blur 模糊的距离
color 颜色
text-height 文本的高度
line-height 行高
vertical-align 文本的垂直对齐方式
top
middle
bottom
八、背景
background-color 背景颜色
background-image 背景图片
background-repeat 图片的重复方式
repeat
repeat-x
repeat-y
no-repeat
inherit
background-attachment 背景图像位置是否固定
scroll 默认值,背景图像会随着页面其他部分滚动
fixed 不随页面其他部分滚动
inherit 继承父元素的特性
background-position 定位
background 可用来简写
九、列表
list-style(简写形式)
list-style-image 使用图像来替换列表项的标记
list-style-position 设置在何处放置列表标记项
inside 列表项目标记放置在文本以内
outside 默认值 列表标记放置在文本以外
inherit 从父级继承
list-style-type 设置列表项标记的类型(各种图形数字)
十、定位
position 例:position:relative;(其他的也一样的用法)
relative top:12px;
absolution left:20px;
fixed
top
right
bottom
left
z-index 设置显示的级别顺序,默认值是0(需要配合定位使用才会有效)
十一、布局
float 设置浮动 left right
clear 清除浮动 left right both
display 规定元素应该生成的框的类型(display:inline-block/none(不会被显示,也不会占据位置))
visibility 规定元素是否可见(visibility:visible/hidden)
overflow 设置文本超出规定区域后(overflow:hidden/scroll/auto/visible(默认的))
十二、边框
border 简写形式
border-width 边框的宽度
border-style 边框的样式(dotted solid double dashed)
border-color 边框的颜色
border-radius 边框是否设置圆角,也可以用来设置图片
box-shadow 边框的阴影
十三、外边距
margin 简写形式
margin-top 上边距
margin-right 右边距
margin-left 左边距
margin-bottom 下边距
十四、内边距
padding 内容到边界的距离
padding-top 内上边距
padding-right 内右边距
padding-bottom 内下边距
padding-left 内左边距
行内样式(标签style属性) 直接利用的style属性
内联样式(头部style标签) 利用head里面的style双标签
外联样式(加载外部文件) 通过引入外部的css文件
<link rel="stylesheet" type="text/css" href="**.css" />
二、css语法特点
名字{属性:属性;}
注释:/*注释内容*/
三、常用的选择器
class选择器 .class名{}
id选择器 #id名{}
标签选择器 标签名{}
层级选择器 名字a 名字b 名字c{}
组合选择器 名字1,名字2,名字3{}
通配符 *{}
伪类选择器 父类 第一个子标签:nth-child(这里填写数字) 如:
.all div:nth-child(5) 这里的数值填写你要修饰的那个位置,是整体的位置
{ 不管是什么标签,反正是总体的位置
color:red;
}
.all p:nth-child(1)
{
color:blue;
}
<div class="all">
<p>我是检测伪类选择器5</p>
<div>我是检测伪类选择器1</div>
<div>我是检测伪类选择器2</div>
<div>我是检测伪类选择器3</div>
<div>我是检测伪类选择器4</div>
</div>
同时给多个a标签的四个属性设定不同的值
a标签的名字:link{
}
a标签的名字:visited{
}
a标签的名字:hover{
}
a标签的名字:active{
}
属性选择器 input[type="text/css"]{}
四、尺寸
width: 宽度
height: 高度
min-height: 最小高度
max-height: 最大高度
min-width: 最小宽度
max-width: 最大宽度
五、单位
em 根据父级字体调节
rem 根据html字体调节
% 百分比
px 像素
vw 根据窗口的宽度
vh 根据窗口的高度
六、字体
font-style(normal italic oblique inherit)定义字体的风格
font-weight 定义字体是否加粗
font-size 定义字体的大小
font-family 定义字体的字体
font:style weight size family(简写形式,顺序不能变 且size family不能省略)
七、文本
text-indent 文本的缩进
text-align 文本的水平对齐方式
text-overflow 当文本超出指定区域后怎么处理
clip 修剪文本
ellipsis 用省略号来代替被剪的文本
string 给定的字符来代替被剪的文本
text-decoration 文本的下划线
none 默认
underline 下划线
overline 文本头上
line-through 贯穿文本
blink 定义闪烁的文本
inherit 从父类继承
text-shadow(h-shadow v-shadow blur color)文本的阴影
h-shadow 水平阴影的位置
v-shadow 垂直阴影的位置
blur 模糊的距离
color 颜色
text-height 文本的高度
line-height 行高
vertical-align 文本的垂直对齐方式
top
middle
bottom
八、背景
background-color 背景颜色
background-image 背景图片
background-repeat 图片的重复方式
repeat
repeat-x
repeat-y
no-repeat
inherit
background-attachment 背景图像位置是否固定
scroll 默认值,背景图像会随着页面其他部分滚动
fixed 不随页面其他部分滚动
inherit 继承父元素的特性
background-position 定位
background 可用来简写
九、列表
list-style(简写形式)
list-style-image 使用图像来替换列表项的标记
list-style-position 设置在何处放置列表标记项
inside 列表项目标记放置在文本以内
outside 默认值 列表标记放置在文本以外
inherit 从父级继承
list-style-type 设置列表项标记的类型(各种图形数字)
十、定位
position 例:position:relative;(其他的也一样的用法)
relative top:12px;
absolution left:20px;
fixed
top
right
bottom
left
z-index 设置显示的级别顺序,默认值是0(需要配合定位使用才会有效)
十一、布局
float 设置浮动 left right
clear 清除浮动 left right both
display 规定元素应该生成的框的类型(display:inline-block/none(不会被显示,也不会占据位置))
visibility 规定元素是否可见(visibility:visible/hidden)
overflow 设置文本超出规定区域后(overflow:hidden/scroll/auto/visible(默认的))
十二、边框
border 简写形式
border-width 边框的宽度
border-style 边框的样式(dotted solid double dashed)
border-color 边框的颜色
border-radius 边框是否设置圆角,也可以用来设置图片
box-shadow 边框的阴影
十三、外边距
margin 简写形式
margin-top 上边距
margin-right 右边距
margin-left 左边距
margin-bottom 下边距
十四、内边距
padding 内容到边界的距离
padding-top 内上边距
padding-right 内右边距
padding-bottom 内下边距
padding-left 内左边距
阅读全文
0 0
- css(cascading stylesheet language)的总结
- CSS-Cascading StyleSheet
- qt4 StyleSheet的总结
- Cascading Style Sheet (css) 的Expression 属性
- CSS(Cascading Style Sheet )级联样式表总结
- test stylesheet.css
- CSS (Cascading Style Sheets) 简介
- XSL 语言(EXtensible Stylesheet Language)
- Cascading TemplateTap的使用
- css link标签stylesheet问题
- Inheritance and Cascading Styles in CSS Explained
- web之CSS(Cascading Style Sheets)
- css (Cascading style sheet)样式表
- CSS Cascading Style Sheets(层叠样式表单)
- CSS-Cascading Style Sheet 层叠样式表
- styleSheet的动态修改
- QT的stylesheet属性
- Qt StyleSheet的使用
- 关于MLX90614红外测温模块SMBus 协议的学习笔记<一>(附MLX90614中文资料,英文资料)
- this,call,apply
- N
- 【快速幂公式】“盛大游戏杯”第15届上海大学程序设计联赛夏季赛暨上海高校金马五校赛-添加好友
- UVA 140 Bandwidth
- css(cascading stylesheet language)的总结
- 位域
- 安卓enableNetwork连接不上指定wifi或连接wifi后断开,连接到其他wifi的原因和解决方法
- git 使用工具教程
- linux常用命令
- sql语句应该考虑哪些安全性?
- Android 利用JNI实现串口通信
- 获取跟控制器rootViewController
- 变量初始化顺序