css

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css相关的知识,希望对你有一定的参考价值。

#
##<a>元素

为了解决超链接在点击后依旧拥有相关的响应故其link、hover、visited
、active顺序应如下:   
a:link{
    color: red;
}

a:visited{
    color: blue;
}

a:hover{
    color: green;
}

a:active{
    color: orange;
}

##内联元素和块级元素的区别

**1.文档流**:标准文档流就是指在没有浮动或定位情况下元素按照css的标准来排列,或者说是css默认排列的方式。          
**2.块级元素:**    
(1)前后换行显示,默认状态下独占一行。                          
(2)块级元素常作为容器。可以包含其他块级元素,行级元素。
(3)块级元素有一定的高度和宽度,用width、height来表示。   
(4)分类:div、p、h1-h6、ul、ol、hr、table、form

**3.内联元素(行级元素,行内标签)**   
(1)类似于文本的显示方式,逐行显示。   
(2)span、lable、 a、img、input、textarea

##display属性

**定义**:规定了生成框的类型  
值:     
   none:不显示,位置还是在    
   inline:指定对象为行级元素,行级元素不支持高和宽。    
   inline-block:行内块级元素。本质是行级元素,但是支持高宽。eg:img

#选择器
##

**1.id选择器**   
1.1、在整个网页中必须是唯一的id,#表示id。   
1.2、id选择器不能结合使用。    
eg: #id_name{      
margin:20px 10px;   
}   

**2.类(class)选择器**   
2.1、在整个网页中可以重复使用,**.** 表示class。   
2.2、类(class)选择器可以结合使用。   
eg: .class_name{      
margin:20px 10px;   
}
   
    **注:id选择器优先级大于类(class)选择器**

**3.元素选择器**   
3.1 w3c元素选择器又称为类型选择器。   
eg: p{      
margin:20px 10px;   
}


**4.分组选择器**    
eg: div,p,img{      
margin:20px 10px;   
}

**5.属性选择器**   
5.1 单个属性选择器
eg: [name]{
margin:20px 10px;   
}   
5.2 多个属性选择器   
eg: [name][title]{
margin:20px 10px;   
}   
5.3属性值选择器    
eg: [name=username]{
margin:20px 10px;   
}   
5.4属性中包含指定词汇的元素   
[title~=gyy]   
5.5[attribute|=value]    
用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。   
5.6[attribute^=value]   
匹配属性值以指定值开头的每个元素。   
5.7[attribute$=value]   
匹配属性值以指定值结尾的每个元素。   
5.8[attribute*=value]   
匹配属性值中包含指定值的每个元素。

**6.后代选择器(包含选择器)**   
<code> #p1 em{   
margin:10px;   
}</code>

**7.子元素选择器**   
7.1子元素选择器(Child selectors)只能选择作为某元素子元素的元素。(只可以改变)   
<code> h1 > strong {   
color:red;   
}</code>   
**8.相邻兄弟选择器**   
  <code>h1 + p {margin-top:50px;}</code>
    <code><div>
          <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
          </ul>
          <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
          </ol>
    </div> </code> 

注意: 请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。   
**9.通配符**   
<code>*{   
margin:10px;   
}</code>   
注意:作用于所有元素,但是***优先级最低***。

**10.伪类 (Pseudo-classes)**   
:active 向被激活的元素添加样式。 1   
:focus 向拥有键盘输入焦点的元素添加样式。 2   
:hover 当鼠标悬浮在元素上方时,向元素添加样式。 1    
:link 向未被访问的链接添加样式。 1    
:visited 向已被访问的链接添加样式。 1    
:first-child 向元素的第一个子元素添加样式。 2    
:lang 向带有指定 lang 属性的元素添加        样式。 2    
    
**11.伪元素选择器**  
元素::选择 或者 元素:选择  
:first-letter 向文本的第一个字母添加特殊样式。 1    
:first-line 向文本的首行添加特殊样式。 1    
:before 在元素之前添加内容。 2    
:after 在元素之后添加内容。 2 


##盒子模型
**padding**  
padding:内边距。使用会改变盒子的大小   
padding:10px;上下左右都是10px;     
padding:20px 10px;上下左右;    
padding:20px 10px 5px ;上(左右)下      
padding:20px 10px 5px 0px;上右下左(顺时针)   
    
**border**  
必须设置样式,像素。  
 
**margin**  

使用负边距会是文档流发送偏移,不会占据原来的空间

以上是关于css的主要内容,如果未能解决你的问题,请参考以下文章

css [css:fadeout / fadein] css示例。 #css

css基础 CSS 组合选择符CSS 伪类CSS 伪元素

css 深度提示#css中的css base builder CSS

css基础 CSS 媒体类型CSS 属性 选择器CSS 表单CSS 计数器

什么是css

测开之CSS・第一篇《CSS语法基础》