css知识_html/css_WEB-ITnose
程序员文章站
2023-12-23 13:07:40
...
css和html相结合的第一种方式:
1,每一个html标签中都有一个style样式属性,该属性就是css代码
例:
2,使用style样式属性,该属性的值就是css代码。一般定义在head标签中,首先加载
例:
3,将上面style标记里的内容写在文件div.css中,再导入。div.css放在同一个文件夹中
@import url(div.css);
4.直接导入css样式
(rel表示与页面的关系)
css代码格式:
选择器名称{属性名:属性值;属性名:属性值;...}
1,html标签选择器
2,class选择器
例:div.biaoqian{}只适用于
.biaoqian{}适用于所有的>
3,id选择器(id值在页面中是唯一的,id通常都是为了去表示页面的一些特定区域使用的)
例:div.#id1{}只适用于
#id2{}适用于所有的>
优先级:html标记 4,扩展选择器
1,关联选择器(选择器中的选择器)
例:div b {}只适用于
2,组合选择器(对多个标签都这样设置)
例:body,div,{background-color:#36F;color:#F23;}
3,伪元素选择器
例:超链接的状态
a:link{}//未访问
a:hover{}//鼠标移到上面的效果
a:action{}//点击效果
a:visited{}//访问后效果
p:first-line 段落的第一行文本
p:first-letter{}段落中的第一个字母
input:focus具有焦点的元素
布局:float
定位:position:
属性:relative相对定位是按照原来的位置进行定位,他原来的位置还在
相对定位向下向右是正方向
绝对定位:相对于离他最近的有定位属性的父级,他原来占有的位置没有了
z-index层级属性没有单位
css文字属性:
font-size 可以设置字体的尺寸em字符的倍数单位ex一半px像素值
text-align设置文本对齐方式left左对齐,right右对齐 center居中对齐,justify两端对齐
line-height设置元素的行高
text-indent首行缩进
font-weight文本的粗细设置normal按标准显示,bold加粗显示
font-style设置文本显示风格 normal按标准显示 italic倾斜显示
text-decoration设置文本修饰风格underline下划线 overline上划线,line-through删除线 none去除文本修饰风格。
font-variant字体是否大写 small-caps为大写normal为标准小写
color设置字体颜色
font-family 文字字体
padding 内边距 如果有两个参数,一上下二左右 如果三个参数 一上二左右三下 四个参数上右下左
padding-top padding-left padding-right padding-bottom
margin外边距 上下谁的外边距大就是谁的值 左右外边距为两者外边距之和
margin:0 auto;上下外边距0像素,左右自动,相当于居中适用于块级元素,行内元素的margin只有左右,没有上下
margin可以设置为负值,padding不可以
块级元素不设置具体的宽度,默认100% 如果不设置固定的高度,那么元素的高度会根据内容来变换
块级标签转化为行级标签 p{display:inline;}
行级标签转化为块级标签a{display:block;}行级元素不能设置宽高
行级元素不能使用margin: 0 auto;居中要转化为块级元素
overflow:hidden;将溢出的文字隐藏 可以解决div嵌套加float的bug
overflow:scroll;添加滚动条
overflow:auto;自动选择
clear:left;左边清除浮动
background-image属性:背景图片,不影响文字的显示
background-image:url(dog.jpg);设置背景图
background-repeat:;控制背景图的重复方式
background-position:100px 300px;控制背景的位置,第一个参数代表距离元素左侧的距离,第二个参数代表距离元素顶部的距离
同时设置多个元素:顺序为背景颜色 背景图片 背景图重复方式 背景图距离左侧距离 背景图距离顶部位置
background-attachment:fixed;对背景图固定
css精灵sprite技术:让某个有固定大小的元素只显示背景的一部分
例:background:url(dogs.jpg) no-repeat -370px -230px;
鼠标样式cursor:hand是手型 pointer手型兼容性强 crosshair是十字型 text 使移动到文本上的那种效果 wait是等待的那种效果 default是默认效果 help是问号 e-resize是向右的箭头 ne-resize是向右上的箭头 nresize向上的箭头 nw-resize是向左上的箭头 w-resize是向左的箭头 sw-resize向左下的箭头 s-resize向下的箭头 se-resize向右下的箭头 auto由系统自动给出的效果
visibility属性用来控制元素的隐藏和显示状态visible当前元素为显示状态 hidden当前元素为隐藏状态 此属性隐藏元素。位置还在
display:none;相当于没有写这个元素,位置也没有了
opacity:0-1;(w3c标准) filter:alpha(opacity=0-100); (IE)
list-style取消li中的远点
命名规范:id名字必须具有唯一性 class可以有多个 有父子关系的样式,应通过命名体现 合理注释 驼峰命名法:use_name_box或use-name-box
优先级:标签选择器white-space:nowrap;在添加浮动时让同一个标签在一行显示,也就是强制不换行
1,每一个html标签中都有一个style样式属性,该属性就是css代码
例:
这是一个div区域
2,使用style样式属性,该属性的值就是css代码。一般定义在head标签中,首先加载
例:
3,将上面style标记里的内容写在文件div.css中,再导入。div.css放在同一个文件夹中
@import url(div.css);
4.直接导入css样式
(rel表示与页面的关系)
css代码格式:
选择器名称{属性名:属性值;属性名:属性值;...}
1,html标签选择器
2,class选择器
例:div.biaoqian{}只适用于
div区域1
.biaoqian{}适用于所有的
3,id选择器(id值在页面中是唯一的,id通常都是为了去表示页面的一些特定区域使用的)
例:div.#id1{}只适用于
div区域2
#id2{}适用于所有的
优先级:html标记 4,扩展选择器
1,关联选择器(选择器中的选择器)
例:div b {}只适用于
此区域
2,组合选择器(对多个标签都这样设置)
例:body,div,{background-color:#36F;color:#F23;}
3,伪元素选择器
例:超链接的状态
a:link{}//未访问
a:hover{}//鼠标移到上面的效果
a:action{}//点击效果
a:visited{}//访问后效果
p:first-line 段落的第一行文本
p:first-letter{}段落中的第一个字母
input:focus具有焦点的元素
布局:float
定位:position:
属性:relative相对定位是按照原来的位置进行定位,他原来的位置还在
相对定位向下向右是正方向
绝对定位:相对于离他最近的有定位属性的父级,他原来占有的位置没有了
z-index层级属性没有单位
css文字属性:
font-size 可以设置字体的尺寸em字符的倍数单位ex一半px像素值
text-align设置文本对齐方式left左对齐,right右对齐 center居中对齐,justify两端对齐
line-height设置元素的行高
text-indent首行缩进
font-weight文本的粗细设置normal按标准显示,bold加粗显示
font-style设置文本显示风格 normal按标准显示 italic倾斜显示
text-decoration设置文本修饰风格underline下划线 overline上划线,line-through删除线 none去除文本修饰风格。
font-variant字体是否大写 small-caps为大写normal为标准小写
color设置字体颜色
font-family 文字字体
padding 内边距 如果有两个参数,一上下二左右 如果三个参数 一上二左右三下 四个参数上右下左
padding-top padding-left padding-right padding-bottom
margin外边距 上下谁的外边距大就是谁的值 左右外边距为两者外边距之和
margin:0 auto;上下外边距0像素,左右自动,相当于居中适用于块级元素,行内元素的margin只有左右,没有上下
margin可以设置为负值,padding不可以
块级元素不设置具体的宽度,默认100% 如果不设置固定的高度,那么元素的高度会根据内容来变换
块级标签转化为行级标签 p{display:inline;}
行级标签转化为块级标签a{display:block;}行级元素不能设置宽高
行级元素不能使用margin: 0 auto;居中要转化为块级元素
overflow:hidden;将溢出的文字隐藏 可以解决div嵌套加float的bug
overflow:scroll;添加滚动条
overflow:auto;自动选择
clear:left;左边清除浮动
background-image属性:背景图片,不影响文字的显示
background-image:url(dog.jpg);设置背景图
background-repeat:;控制背景图的重复方式
background-position:100px 300px;控制背景的位置,第一个参数代表距离元素左侧的距离,第二个参数代表距离元素顶部的距离
同时设置多个元素:顺序为背景颜色 背景图片 背景图重复方式 背景图距离左侧距离 背景图距离顶部位置
background-attachment:fixed;对背景图固定
css精灵sprite技术:让某个有固定大小的元素只显示背景的一部分
例:background:url(dogs.jpg) no-repeat -370px -230px;
鼠标样式cursor:hand是手型 pointer手型兼容性强 crosshair是十字型 text 使移动到文本上的那种效果 wait是等待的那种效果 default是默认效果 help是问号 e-resize是向右的箭头 ne-resize是向右上的箭头 nresize向上的箭头 nw-resize是向左上的箭头 w-resize是向左的箭头 sw-resize向左下的箭头 s-resize向下的箭头 se-resize向右下的箭头 auto由系统自动给出的效果
visibility属性用来控制元素的隐藏和显示状态visible当前元素为显示状态 hidden当前元素为隐藏状态 此属性隐藏元素。位置还在
display:none;相当于没有写这个元素,位置也没有了
opacity:0-1;(w3c标准) filter:alpha(opacity=0-100); (IE)
list-style取消li中的远点
命名规范:id名字必须具有唯一性 class可以有多个 有父子关系的样式,应通过命名体现 合理注释 驼峰命名法:use_name_box或use-name-box
优先级:标签选择器white-space:nowrap;在添加浮动时让同一个标签在一行显示,也就是强制不换行
推荐阅读
-
CSS的link和@import的区别_html/css_WEB-ITnose
-
css知识_html/css_WEB-ITnose
-
Css样式兼容IE6,IE7,FIREFOX的写法_html/css_WEB-ITnose
-
CSS3 -webkit-transition_html/css_WEB-ITnose
-
CSS3阴影 box-shadow的使用和技巧总结_html/css_WEB-ITnose
-
是怎么用的?_html/css_WEB-ITnose
-
如何设计如此效果_html/css_WEB-ITnose
-
网站网页生成.shtml访问无法显示_html/css_WEB-ITnose
-
html iframe标签在手机UC浏览器中访问异常问题_html/css_WEB-ITnose
-
CSS复习之旅(一)_html/css_WEB-ITnose