CSS教程

CSS基本知识

本文主要是介绍CSS基本知识,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

CSS 指层叠样式表 (Cascading Style Sheets)

浏览器适配

 

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

 

 

 

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

#para1 { text-align:center; color:red; }

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示

.center {text-align:center;}     <h1 class="center">标题居中</h1>

你也可以指定特定的HTML元素使用class。

p.center {text-align:center;}    <p class="center">这个段落居中对齐。</p> 

 

插入样式表的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

 !important 规则:

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里.但是它改变了你样式表本来的级联规则,从而使其难以调试。慎用

 

如果定义了颜色属性,还必须定义背景色属性。

 

为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

 

css属性缩写大部分情况下不用按顺序, 部分特殊需要按照顺序,border的顺序可以乱,但是font的就不能乱

Margin 对于多个值有以下的简写规则:

  • 当只有一个值声明时,该值会用于所有四个值。
  • 当只有两个值声明时,第一个值用于上边距和下边距,第二个值用于左边距和右边距。
  • 当有三个值声明时,第一个值用于上边距,第二个值用于左边距和右边距,第三个值用于下边距。
  • 当有四个值声明时,其会按顺序用于上、右、下、左边距(按顺时针)。

 

 

 

 

 

visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

类似安卓的visibility = gone,visiable,invisiable

 

块级元素(block)特性:

  • 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性:

  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;

块级元素主要有:

  •  address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有:

  • a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素):

  • applet ,button ,del ,iframe , ins ,map ,object , script

 

position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。可作为标题栏

 

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

 

overflow 属性用于控制内容溢出元素框时显示的方式。

 

 

CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了四种组合方式:

 

  • 后代选择器(以空格     分隔)   div p  (div内的所有p)
  • 子元素选择器(以大于 > 号分隔)div>p  (div下的直属p)
  • 相邻兄弟选择器(以加号 + 分隔) div+p  (div之后的一个同根p)
  • 普通兄弟选择器(以波浪号 ~ 分隔) div~p  (div之后的所有同根p)

 

伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。

CSS伪类是用来添加一些选择器的特殊效果。伪类的名称不区分大小写。与 CSS 类配合使用:input:checked(对伪类checked进行css编辑样式)

 

 

 

CSS伪元素是用来添加一些选择器的特殊效果。内部元素进行css样式设置

 

left优先级高于right,不在乎选择器优先规则

 

鼠标移动到指定位置,如下拉按钮、提示文本时隐藏内容可见:首先display:none或者visibility:hidden;利用伪类hover,将display: block或者visibility:visiable

 

图像拼合就是单个图像的集合。后续操作总是在这张图片上进行,对图片的部分内容进行操作,比如对图片右半部分隐藏。加载一张图片,对服务器进行一次请求总比对服务器进行多次图片请求来得简单,避免延迟

 

@media规则,不同媒体展示不同css,如

@mediascreen

{p.test{font-family:verdana,sans-serif;font-size:14px;}}

@mediaprint

{p.test{font-family:times,serif;font-size:10px;}}

/* 响应式布局 - 小于 600 px 时改为上下布局 */ (监听窗口大小改变)

@media screen and (max-width: 600px)

{ .column { width: 100%; } }

 

属性选择器:具有特定属性的元素设计样式

[title](头名为title都执行) 

[title=runoob](头名为title,后接=只有runoob才执行) 

[title~=runoob](头名为title,后接=只要有独立单词runoob执行) 

[title*=runoob](头名为title,后接=只要拆分连接有runoob都执行) 

[title|=runoob](头名为title,后接=开头为runoob且唯一单词执行) 

[title^=runoob](头名为title,后接=前几个字母为runoob都执行) 

[title$=runoob](头名为title,后接=后几个字母为runoob都执行) 

{ color:blue; }

 

Transition过度属性主要是用来对某个CSS属性的变化过程进行控制

ease: 默认值(先快后慢)
linear: 匀速
ease-in: 先慢后快
ease-out: 先快后慢
ease-in-out: 先慢后快后慢

 

这篇关于CSS基本知识的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!