01-CSS

前言1-CSS对HTML元素分类

css元素分为三种：块级元素、行内元素和行内块元素。

1.块级元素:设置display:block就是将元素显示为块级元素。

• 独占一行。
• 高度，行高、外边距以及内边距都可以控制。
• 宽度默认是容器的100%。
• 以容纳内联元素和其他块元素。

、
、
...
、
、
、
、、
、
 、

 
 
2.行内元素：块级元素也可以通过代码display:inline将元素设置为行内元素。
 
 
 
  
多个元素在同一行。
 
  
默认宽度就是它本身内容的宽度。
 
  
行内元素只能容纳文本或则其他行内元素。（a特殊）
 
  
可以通过设置display属性变成其他元素。
 
  
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
 垂直居中：
 父元素固定高度，子元素单行，可以设置line-height与父元素同高。
 父元素固定高度，子元素多行，可以设置弹性布局。
 
 
 
 
div{
    border: dashed red;
    width: 300px;
    height: 300px;
    text-align: center;
    display:flex;
    flex-direction:column;
    justify-content:center;
   
}
span{
    border: dashed rgb(0, 17, 255);
   
}
 
 
注意：
 
 
 
  
只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
 
  
链接里面不能再放链接。
 
 
 
 
、、、、、、、、、
 
 
3.行内块状元素:就是同时具备行内元素、块状元素的特点，代码display:inline-block就是将元素设置为状元素。
 
 
 
  
同时具有行内元素和块级元素的特点。
 
  
和其他元素在同一行。
 
  
高、宽和边距可以设置。
 
 
 
 
、
 
 
 
  
 
   
  
   
 
  
 
  

    HTML标签嵌套规则 
  
 
 
 
 
前言2-CSS样式特性
 
 
 
  
CSS的样式有层叠和继承特性。
 
 
 
 
层叠特性：CSS的层叠依据选择器的权重：
 
 
 
  
!important的作用是提升优先级，比内联样式的优先级还高。
 
  
第一等：代表内联样式，如: style=””，权值为1000。
 
  
第二等：代表ID选择器，如：#content，权值为0100。
 
  
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
 
  
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
 
  
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
 
  
继承的样式没有权值。
 
 
 
 
权重比较规则：
- 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
- 无论是行间、内部和外部样式，都是按照这个规则来进行比较。
- 在权重相同的情况下，后面的样式会覆盖掉前面的样式。
- 通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。
- 复合选择器的权重会叠加。
 
 
继承特性：在 W3C 规范的每一个属性的介绍中，都会有一个 "inherited" 项，如果值为 "yes"，表示该属性是一个可继承的属性；如果值为 “no”，表示该属性是一个不可继承的属性。
 
 
不可继承的：display、margin、border、padding、background、
  height、min-height、max-height、width、min-width、max-width、
  overflow、position、left、right、top、bottom、z-index、float、clear、
  table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、
  line-height、color、font、font-family、font-size、font-style、font-variant、
  font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
 
 
前言3-CSS常见单位
 
 
 
  
 
   
  
   
 
  
 
  

    相对长度 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    绝对长度 
  
 
 
 
 
前言4-CSS书写规范
 
 
 
  
 
   
  
   
 
  
 
  

    书写规范 
  
 
 
 
 
一、选择器
 
 
1.1 标签选择器
 
 
html
 
 

    
你好
    超链接

 
 
css：注意样式会重叠。
 
 
h1{
    color: rgb(47, 209, 47);
}
h1{
    background: beige;
}
a {
    text-decoration: none;
}
 
 
 
  
 
   
  
   
 
  
 
  

    效果 
  
 
 
 
 
1.2 类选择器
 
 
html
 
 

   
成功
   
失败

 
 
css
 
 
#success{
    border: solid 1px green;
}
#error {
    border: solid 1px red;
}
.mb10{
    margin-bottom: 10px;
}
 
 
 
  
 
   
  
   
 
  
 
  

    效果 
  
 
 
 
 
1.3 ID选择器
 
 
html
 
 

   
成功
   
失败

 
 
css:ID选择器，推荐给唯一的属性设置样式。
 
 
#success{
    border: solid 1px green;
}
#error {
    border: solid 1px red;
}
 
 
 
  
 
   
  
   
 
  
 
  

    效果 
  
 
 
 
 
1.4 结构选择器
 
 
html
 
 

   

       

           
H1
           

               
H2
           
           
H2
           
H2
       
   

 
 
1.4.1 后代选择器
 
 
/* 后代选择器 */
main article h2{
    color: rgb(214, 49, 71);
}
 
 
 
  
 
   
  
   
 
  
 
  

    效果 
  
 
 
 
 
1.4.2 子代选择器
 
 
main article > h2{
    color: rgb(41, 44, 207);
}
 
 
 
  
 
   
  
   
 
  
 
  

    效果 
  
 
 
 
 
1.4.3 兄弟选择器
 
 

   

       

           
H1
           
H2
           

               
H2
           
           
H2
           
H2
       
   

 
 
article h1 ~ h2{
    color: rgb(41, 44, 207);
}
 
 
 
  
 
   
  
   
 
  
 
  

    ~效果 
  
 
 
 
 
article h1+h2{
    color: rgb(41, 44, 207);
}
 
 
 
  
 
   
  
   
 
  
 
  

    +效果 
  
 
 
 
 
1.5 属性选择器
 
 
html
 
 

    

        

            
H1
            
H2
            

                
H2
            
            
 H2
            
H2
        
    
 
 
 
css
 
 
h2[title="abc"]{
    color: rgb(209, 47, 47);
}
 
 
 
  
 
   
  
   
 
  
 
  

    效果 
  
 
 
 
 
1.6 伪类选择器
 
 
 
  
伪类：用于定义元素的特殊状态。
 
 
 
 
 
  
动态伪类选择器:E: link、E: visited、E: active、E: hover、E: focus。
 
  
目标伪类选择器: E: target;用来匹配页面的URI中某个标识符的目标元素。
 
  
语言伪类选择器:E: lang;用来匹配使用指定语言的元素。
 
  
元素状态伪类选择器:E: checked、E: disabled；
 
  
结构伪类选择器：
 : nth-child、: nth-last-child、: nth-of-type、: nth-last-of-type、: first-child、: last-child、: only-child、: first-of-type、: last-of-type、: only-of-type、: root 、: empty 。
 
  
否定伪类选择器：E: not(F) 匹配所有除F外的E元素。
 
   
 
    
 
     
  
     
 
    
 
    

      伪类 
    
 
   
 
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    伪元素 
  
 
 
 
 
二、样式
 
 
2.0 通用样式属性
 
 
 
  
 
   
  
   
 
  
 
  

    用户外观(User-interface) 属性 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    线框属性 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    多列属性 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    尺寸属性 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    表格属性 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    列表属性 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    背景属性 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    内容生成属性 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    CSS函数 
  
 
 
 
 
2.1.字体样式
 
 
 
  
使用font属性也可以定义字体类型。
 font:font-style || font-variant || font-weight || font-size || line-height || font-family。
 
  
 定义斜体字体：CSS使用font-style属性来定义字体斜体效果。
 
  
 定义字体大小写：CSS使用font-variant属性来定义字体大小效果。
 
  
 定义字体粗细：CSS使用font-weight属性来定义字体粗细。
 
  
 定义字体大小:CSS使用font-size属性来定义字体大小。
 font-size:xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length。
 
  
 定义行高 ：CSS使用line-height属性来设置以百分比计的行高。
 
  
 定义下划线：CSS使用text-decoration属性来定义字体下划线效果。
 text-decoration:none || underline || blink || overline || line-throuth。
 
  
 定义字体颜色：CSS使用color属性来定义字体颜色。
 
   
 
    
 
     
  
     
 
    
 
    

      字体属性 
    
 
   
 
 
 
 
 
2.2 文本样式
 
 
CSS在命名属性时，特意使用了font前缀和text前缀来区分两类不同性质的属性。
 
 
 
  
 定义缩进:CSS使用text-indent属性定义首行缩进。
 
  
 定义文本水平对齐：CSS使用text-align属性来定义文本的水平对齐方式。
 text-align属性只能够设计文本的水平对齐方式，而对于块状元素的水平对齐还需要使用CSS的margin属性。在标准化设计中，如果当块状元素左右边界都被设置为自动式，则块状元素将居中显示。
 
  
 定义文本垂直对齐:在传统布局中，一般元素不支持垂直对齐效果，不过在表格中可以实现。CSS使用vertical-align属性来定义文本垂直对齐问题。
 vertical-align:auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
 vertical-align不支持块状元素对齐，只有当包含框显示为单元格时才有效。
 
  
 定义字距和词距:CSS使用letter-spacing属性来定义字距，使用word-spacing属性来定义词距。
 
  
 定义行高:CSS使用line-height属性定义行高。一般行高的最佳设置范围为1.2~1.8em,遵循字体越大，行高越小的原则来定义段落的具体行高。
 
  
 处理文本溢出：
 
 
 
 
white-space: nowrap;     --- 文本不换行 
overflow: hidden;           --- 溢出部分隐藏
text-overflow:ellipsis;     -- 处理异常部分...
 
 
 
  
 
   
  
   
 
  
 
  

    文本属性 
  
 
 
 
 
三、盒子模型
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    盒子模型 
  
 
 
 
 
 折叠外边距：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 
 
 当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。而左右外边距不合并。 
 
 
 
 
  
 
   
  
   
 
  
 
  

    折叠及解决方案 
  
 
 
 
 
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。参考：https://www.jianshu.com/p/5f18f12cd162
 
 
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
 
 
产生折叠的原因:根据w3c规范，两个margin是邻接的必须满足以下条件
 
 
1.必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
2.没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开。
3.都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
　 a:元素的margin-top与其第一个常规文档流的子元素的margin-top。
　 b:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top。
　 c:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom。
　 d:高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom。
 
 
3.1 CSS盒子属性
 
 
 
  
 
   
  
   
 
  
 
  

    盒子属性 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    CSS3box新属性 
  
 
 
 
 
3.2 CSS边框和轮廓属性
 
 
 
  
 
   
  
   
 
  
 
  

    边框和轮廓属性 
  
 
 
 
 
3.3 CSS边距属性
 
 
 
  
 
   
  
   
 
  
 
  

    边距属性 
  
 
 
 
 
3.4 CSS填充属性
 
 
padding:父元素设置宽和高，子元素没有设置宽和高，则子元素在设置padding属性的时候，子元素的宽和高与父元素保持一致。
 
 
 
  
 
   
  
   
 
  
 
  

    填充属性 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    清除内外边距 
  
 
 
 
 
四、CSS布局
 
 
 
  
Box是CSS布局的基本单位。传统布局方式：标准流、浮动、定位。
 
 
 
 
Box是CSS布局的对象和基本单位直观点来说，就是一个页面是由很多个Box组成的。元素的类型和display属性，决定了这个Box的类型。 不同类型的Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
 
 
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
 
 
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
 
 
BFC的特性:
 1.内部的Box会在垂直方向上一个接一个的放置。
 2.垂直方向上的距离由margin决定。
 3.bfc的区域不会与float的元素区域重叠。
 4.计算bfc的高度时，浮动元素也参与计算。
 5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
 
 
形成BFC的条件:
 1.浮动元素，float除none以外的值。
 2.定位元素，position（absolute，fixed）。
 3.display为以下其中之一的值 inline-block，table-cell，table-caption。
 4.overflow除了visible以外的值（hidden，auto，scroll）。
 
 
 
  
 
   
  
   
 
  
 
  

    定位属性 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    显示和隐藏 
  
 
 
 
 
4.1 浮动布局
 
 
 
  
浮动定位：解决了多个块级元素能在一行内显示。
 
 
 
 
文档流是文档中可显示对象在排列时所占用的位置。而标准文档流指的是在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，就要使文档脱离标准流。
 
 
 
 
  
 
   
  
   
 
  
 
  

    准则-1 
  
 
 
 
 
 浮动示例：解决div独占一行。 
 
 html 
 
 
 

   
DIV1
   
DIV2

 
 
CSS1
 
 
 div {
     border: solid 2px rgb(219, 22, 22);
     width: 200px;
     /* float: left; */
}
 
 
 
  
 
   
  
   
 
  
 
  

    效果1 
  
 
 
 
 
CSS2
 
 
 div {
     border: solid 2px rgb(219, 22, 22);
     width: 200px;
     float: left; 
}
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    效果2 
  
 
 
 
 
 特点： 
 
 1.将元素排除在文档流之外，即元素脱离文档流，不受默认排列方式（从上到下或者从左往右）的控制。 
 
 2.浮动起来的元素将不再占用页面的空间。（元素从浏览器上原地拔起，从上往下依旧能看到浮动元素），有可能会压住其他的元素。 
 
 3.元素会停靠在包含框（父层元素）的左边或左边，或者停靠在已经浮动的元素的左边或者右边。 
 
 4.元素无论怎么浮动，最终还是在包含框之内。 
 
 5.块级浮动之后，宽度自适应不是100%。
 6.行内元素浮动后，除了具备以上特点，它将变成块级元素，行内元素设置浮动多数是为了改变宽和高。 
 
 
 
 
  
 
   
  
   
 
  
 
  

    推荐用法 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    浮动弊端 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    清除浮动本质 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    清除浮动 
  
 
 
 
 
4.2 定位布局
 
 
 
  
按照定位(定位模式+边偏移)的方式移动Box。子绝父相。
 
 
 
 
css中的position属性，position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局，使用TLBR(top,left,bottom,right)来调整元素位置。
 
 
 
  
 static：没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级，在普通流中，各个元素默认的属性。
 
  
 relative：对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位。
 
  
 absolute: 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。
 
  
 fixed：这里所固定的参照对像是可视窗口而并非是body或是父级元素。使用了fixed的元素不会随着窗口的滚动而滚动。属于absolute的子集。
 
   
 
    
 
     
  
     
 
    
 
    

      定位的特殊性-1 
    
 
   
 
 
   
 
    
 
     
  
     
 
    
 
    

      定位的特殊性-2 
    
 
   
 
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    总结 
  
 
 
 
 
4.3 弹性盒布局
 
 
弹性盒模型是css3的一种新的布局方式，是一种当前页面需要适应不同的屏幕大小及设备类型时确保拥有恰当的行为的布局方式。可以代替浮动。
 
 
 
  
弹性容器：display:flex 设置块级弹性容器；display:inline-flex设置行内弹性容器。
 
  
弹性元素：弹性容器的子元素。一个元素可以同时使弹性容器和弹性元素。
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    弹性盒属性 
  
 
 
 
 
4.4 栅格系统
 
 
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大；兼容性不如Flex。
 Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。
 
 
 
  
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
 
  
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
 
  
行和列的交叉区域，称为"单元格"（cell）。
 
  
 
划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
 
 
   
 
    
 
     
  
     
 
    
 
    

      网格布局 
    
 
   
 
 
 
 

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    

                        
                        

                            
 
                        
                        
                        

                            

                        
                        
                        

                            

                        
                    
                
            
        
    
    

        
你可能感兴趣的:(01-CSS)
        

            

                

                    
day03-CSS基础
                        是程序喵呀
WEB前端tensorflow人工智能html
                        
01-CSS初体验层叠样式表(CascadingStyleSheets，缩写为CSS），是一种样式表语言，用来描述HTML文档的呈现（美化内容）。书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。CSS初体验 /*选择器{}*/ p{  /*CSS属性*/  color:red; }​体验CSS提示：属性名和属性值成对出现→键值对。02-CSS引入方式内部样式表：
                    
                    
CSS基础
                        白小筠
#CSScss前端
                        
文章目录01-CSS初体验02-CSS引入方式03-选择器标签选择器类选择器id选择器通配符选择器04-盒子尺寸和背景色05-文字控制属性字体大小字体粗细字体样式（是否倾斜）行高单行文字垂直居中字体族font复合属性文本缩进文本对齐方式文本修饰线color文字颜色06-调试工具01-CSS初体验层叠样式表(CascadingStyleSheets，缩写为CSS），是一种样式表语言，用来描述HTML
                    
                    
零基础学习CSS
                        清梦压星河_Ciao
前端css前端
                        
01-CSS初体验层叠样式表(CascadingStyleSheets，缩写为CSS），是一种样式表语言，用来描述HTML文档的呈现（美化内容）。书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。CSS初体验/*选择器{}*/p{/*CSS属性*/color:red;}体验CSS提示：属性名和属性值成对出现→键值对。02-CSS引入方式内部样式表：学习使用CSS代
                    
                    
CSS基础详细解析(附带综合小练习)
                        东北赵四
前端开发语言笔记前端csshtml
                        
目标：掌握CSS属性基本写法，能够使用文字相关属性美化文章页。01-CSS初体验层叠样式表(CascadingStyleSheets，缩写为CSS），是一种样式表语言，用来描述HTML文档的呈现（美化内容）。书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。CSS初体验 /*选择器{}*/ p{  /*CSS属性*/  color:red; }​体验CSS提示：属
                    
                    
05-前端基础CSS第三天
                        超级用户 root
前端前端css
                        
01-CSS三大特性之层叠性1.CSS的三大特性CSS有三个非常重要的三个特性：层叠性、继承性、优先级。1.1层叠性相同选择器给设置相同的样式，此时一个样式就会**覆盖（层叠）**另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠示例颜色冲突采取就近原则，文字大小不冲突不会层叠CSS层叠性div{colo
                    
                    
04-前端基础CSS第二天
                        超级用户 root
前端css
                        
01-CSS第二天导读目标：能使用emmet语法能够使用CSS复合选择器能够写出伪类选择器的使用规范能够说出元素有几种显示模式能够写出元素显示模式的相互转换代码能够写出背景图片的设置方式能够计算CSS的权重目录：Emmet语法CSS的复合选择器CSS的元素显示模式CSS的背景CSS的三大特性CSS的注释02-emmet语法生成html标签1.Emmet语法Emmet语法的前身是Zencoding，
                    
                    
03-前端基础CSS-第一天
                        超级用户 root
前端前端css
                        
01-CSS层叠样式表导读目标：能够说出什么是CSS能够使用CSS基础选择器能够设置字体样式能够设置文本样式能够说出CSS的三种引入方式能够使用Chrome调试工具调试样式目录：1.CSS简介2.CSS基础选择器3.CSS字体属性4.CSS文本属性5.CSS引入方式6.综合案例7.Chrome调试工具02-CSS简介1.CSS简介CSS的主要使用场景就是美化网页、布局页面的。HTML的局限性CSS
                    
                    
前端css
                        shangxianjiao
前端css
                        
day03-CSS基础目标：掌握CSS属性基本写法，能够使用文字相关属性美化文章页。01-CSS初体验层叠样式表(CascadingStyleSheets，缩写为CSS），是一种样式表语言，用来描述HTML文档的呈现（美化内容）。书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。CSS初体验/*选择器{}*/p{/*CSS属性*/color:red;}体验CSS提
                    
                    
CSS基础
                        明裕学长
黑马程序员WEB基础csshtml前端
                        
day03-CSS基础目标：掌握CSS属性基本写法，能够使用文字相关属性美化文章页。01-CSS初体验层叠样式表(CascadingStyleSheets，缩写为CSS），是一种样式表语言，用来描述HTML文档的呈现（美化内容）。书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。CSS初体验/*选择器{}*/p{/*CSS属性*/color:red;}体验CSS提
                    
                    
01-CSS
                        XAbo

                        
前言1-CSS对HTML元素分类css元素分为三种：块级元素、行内元素和行内块元素。1.块级元素:设置display:block就是将元素显示为块级元素。独占一行。高度，行高、外边距以及内边距都可以控制。宽度默认是容器的100%。以容纳内联元素和其他块元素。、、...、、、、、、、2.行内元素：块级元素也可以通过代码display:inline将元素设置为行内元素。多个元素在同一行。默认宽度就是它
                    
                    
CSS-CSS基础
                        guardwhy
#CSS
                        
1-CSS样式组成1.1CSS规则构成选择器声明图片说明1.2CSS引用写在head标签内：css样式CSS样式…1.3CSS注释CSS注释：/*注释语句*/代码示例01-css初体验h3{text-align:center;color:red;font-family:"微软雅黑";}p{text-align:center;color:blue;font-size:20px;}望江南·超然台上作姑
                    
                    
01-CSS初识
                        覃祚荣
css
                        
第01阶段.前端基础.CSS初识CSS层叠样式表学习目标理解css的目的作用css的三种引入方式应用css三种引用方式的书写通过样式规则给标签添加简单的样式1.CSS初识概念：CSS(CascadingStyleSheets)，通常称为CSS样式表或层叠样式表（级联样式表）作用：主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观
                    
                    
前端之CSS学习01-CSS介绍和CSS样式表
                        能力工场小马哥
前端
                        
00-HTML的局限性背景知识:html:只关注内容语义不能满足设计者需求操作html属性不方便在html总添加样式,会造成页面比较臃肿总结本课:纯HTML页面不太美观,需要一种简单的技术来美化页面01-CSS作用以及初识CSS作用:让我们的网页更加丰富多彩,布局更加灵活让HTML从样式中脱离,实现了HTML专注去做结构呈现,样式交给CSS理想的结果:结构与样式分离效果展示:有CSS和没有CSS的
                    
                    
01-CSS属性：字体属性和文本属性
                        新海说
前端
                        
本文最初于2015-10-04发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。以下是正文。本文重要内容CSS的单位字体属性文本属性定位属性：position、float、overflow等CSS的单位html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。CSS中的单位是必须要写的，因为它没有默认单位。绝对单位：
                    
                    
01-CSS详细介绍
                        仰望与追逐

                        
01-CSS详细介绍1、CSS技术介绍2、CSS语法规则3、CSS和HTML的结合方式第一种：在标签的style属性上设置”key:valuevalue;”，修改标签样式。第二种：在head标签中，使用style标签来定义各种自己需要的css样式第三种：把css样式写成一个单独的css文件，再通过link标签引入即可复用。4、CSS选择器5、常用样式1、CSS技术介绍CSS是「层叠样式表单」。是用
                    
                    
Web前端开发-CSS核心属性
                        viewerlin
HTML/CSSHTMLCSSJavaScript
                        
Web前端开发，自学笔记整理CSS核心属性1.核心属性01-CSS核心属性.htmlCSS核心属性.test1{/*1.宽度*/width:400px;/*2.高度*/height:300px;/*3.背景*//*颜色单词*//*background:red;*//*颜色16进制*//*background:#71d232;*//*颜色三原色RGBa表示透明度*//*background:rgb(
                    
                    
CSS进阶
                        love丁酥酥

                        
在CSS入门系列中，介绍了很多关于CSS的基础知识。比如盒模型，元素特性，定位等表现。但是对这些知识的讲解都很浅显，仅仅让大家有了一个基本的概念认知。这一部分，我们将从更深的一个层次和更高的一个局面来重新为大家梳理这些知识。CSS进阶01-CSS视觉格式化CSS进阶02-盒模型进阶CSS进阶03-定位体系，格式化上下文，常规流CSS进阶04-块格式化上下文BFCCSS进阶05-行内格式上下文IFC
                    
                    
CSS进阶01-CSS视觉格式化
                        love丁酥酥

                        
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）（注2：更多内容请查看我的目录。）1.简介在CSS入门系列中，介绍了很多CSS的基础概念。其中讲到了盒模型。页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visualformattingmodel)是一套规则，将这些框布局成访问者看到的样子。2.视觉格式化模型(visualformattingm
                    
                    
python前端学习之css
                        a88225969
前端python人工智能
                        
01-css的引入方式在HTML中引入css方式总共有三种：行内样式内接样式外接样式3.1链接式3.1导入式css介绍现在的互联网前端分三层：HTML：超文本标记语言。从语义的角度描述页面结构。CSS：层叠样式表。从审美的角度负责页面样式。JS：JavaScript。从交互的角度描述页面行为CSS：CascadingStyleSheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，
                    
                                
java工厂模式
                                    3213213333332132
java抽象工厂
                                    
工厂模式有 
1、工厂方法 
2、抽象工厂方法。 
 
下面我的实现是抽象工厂方法, 
 
给所有具体的产品类定一个通用的接口。 
 

package 工厂模式;

/**
 * 航天飞行接口
 * 
 * @Description
 * @author FuJianyong
 * 2015-7-14下午02:42:05
 */
public interface SpaceF
                                
                                
nginx频率限制+python测试
                                    ronin47
nginx 频率 python
                                    
       
部分内容参考：http://www.abc3210.com/2013/web_04/82.shtml 
首先说一下遇到这个问题是因为网站被攻击，阿里云报警，想到要限制一下访问频率，而不是限制ip（限制ip的方案稍后给出）。nginx连接资源被吃空返回状态码是502，添加本方案限制后返回599，与正常状态码区别开。步骤如下：
                                
                                
java线程和线程池的使用
                                    dyy_gusi
ThreadPoolthreadRunnabletimer
                                    
java线程和线程池 
一、创建多线程的方式 
    java多线程很常见，如何使用多线程，如何创建线程，java中有两种方式，第一种是让自己的类实现Runnable接口，第二种是让自己的类继承Thread类。其实Thread类自己也是实现了Runnable接口。具体使用实例如下： 
1、通过实现Runnable接口方式          1   2   
                                
                                
Linux
                                    171815164
linux
                                    
ubuntu kernel 
http://kernel.ubuntu.com/~kernel-ppa/mainline/v4.1.2-unstable/ 
 
安卓sdk代理 
mirrors.neusoft.edu.cn        80 
 
输入法和jdk 
sudo apt-get install fcitx 
su
                                
                                
Tomcat JDBC Connection Pool
                                    g21121
Connection
                                    
       Tomcat7 抛弃了以往的DBCP 采用了新的Tomcat Jdbc Pool 作为数据库连接组件，事实上DBCP已经被Hibernate 所抛弃，因为他存在很多问题，诸如：更新缓慢，bug较多，编译问题，代码复杂等等。 
       Tomcat Jdbc P
                                
                                
敲代码的一点想法
                                    永夜-极光
java随笔感想
                                    
              入门学习java编程已经半年了,一路敲代码下来,现在也才1w+行代码量,也就菜鸟水准吧,但是在整个学习过程中,我一直在想,为什么很多培训老师,网上的文章都是要我们背一些代码?比如学习Arraylist的时候,教师就让我们先参考源代码写一遍,然
                                
                                
jvm指令集
                                    程序员是怎么炼成的
jvm 指令集
                                    
转自：http://blog.csdn.net/hudashi/article/details/7062675#comments 
  
  
  
将值推送至栈顶时 const ldc  push   load指令 
const系列 
该系列命令主要负责把简单的数值类型送到栈顶。(从常量池或者局部变量push到栈顶时均使用) 
0x02 &nbs
                                
                                
Oracle字符集的查看查询和Oracle字符集的设置修改
                                    aijuans
oracle
                                    
 本文主要讨论以下几个部分：如何查看查询oracle字符集、 修改设置字符集以及常见的oracle utf8字符集和oracle exp 字符集问题。 
一、什么是Oracle字符集  
 Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系。ORACLE 支持国家语言的体系结构允许你使用本地化语言来存储，处理，检索数据。它使数据库工具，错误消息，排序次序，日期，时间，货
                                
                                
png在Ie6下透明度处理方法
                                    antonyup_2006
css浏览器FirebugIE
                                    
由于之前到深圳现场支撑上线，当时为了解决个控件下载，我机器上的IE8老报个错，不得以把ie8卸载掉，换个Ie6,问题解决了，今天出差回来，用ie6登入另一个正在开发的系统，遇到了Png图片的问题，当然升级到ie8(ie8自带的开发人员工具调试前端页面JS之类的还是比较方便的，和FireBug一样，呵呵)，这个问题就解决了，但稍微做了下这个问题的处理。 
 
我们知道PNG是图像文件存储格式，查询资
                                
                                
表查询常用命令高级查询方法(二)
                                    百合不是茶
oracle分页查询分组查询联合查询
                                    
----------------------------------------------------分组查询 group by    having   --平均工资和最高工资   select avg(sal)平均工资,max(sal)  from emp ;  --每个部门的平均工资和最高工资
                                
                                
uploadify3.1版本参数使用详解
                                    bijian1013
JavaScriptuploadify3.1
                                    
使用： 
    绑定的界面元素<input id='gallery'type='file'/>$("#gallery").uploadify({设置参数，参数如下}); 
设置的属性： 
id: jQuery(this).attr('id'),//绑定的input的ID
      langFile: 'http://ww
                                
                                
精通Oracle10编程SQL(17)使用ORACLE系统包
                                    bijian1013
oracle数据库plsql
                                    
/*
 *使用ORACLE系统包
 */
--1.DBMS_OUTPUT
--ENABLE:用于激活过程PUT,PUT_LINE,NEW_LINE,GET_LINE和GET_LINES的调用
--语法：DBMS_OUTPUT.enable(buffer_size in integer default 20000);

--DISABLE:用于禁止对过程PUT,PUT_LINE,NEW
                                
                                
【JVM一】JVM垃圾回收日志
                                    bit1129
垃圾回收
                                    
将JVM垃圾回收的日志记录下来，对于分析垃圾回收的运行状态，进而调整内存分配(年轻代，老年代，永久代的内存分配)等是很有意义的。JVM与垃圾回收日志相关的参数包括： 
 
 -XX:+PrintGC 
 -XX:+PrintGCDetails 
 -XX:+PrintGCTimeStamps  
 -XX:+PrintGCDateStamps 
 -Xloggc 
 -XX:+PrintGC 
通
                                
                                
Toast使用
                                    白糖_
toast
                                    
Android中的Toast是一种简易的消息提示框，toast提示框不能被用户点击，toast会根据用户设置的显示时间后自动消失。 
  
  
 
 创建Toast 
   两个方法创建Toast   
makeText(Context context, int resId, int duration)  
  
  参数：context是toast显示在
                                
                                
angular.identity
                                    boyitech
AngularJSAngularJS API
                                    
angular.identiy   描述:   返回它第一参数的函数. 此函数多用于函数是编程.    使用方法:   angular.identity(value);   参数详解:      Param Type Details   value 
*  
to be returned.      返回值:   传入的value   实例代码:   
<!DOCTYPE HTML>

                                
                                
java-两整数相除，求循环节
                                    bylijinnan
java
                                    

import java.util.ArrayList;
import java.util.List;

public class CircleDigitsInDivision {

	/**
	 * 题目：求循环节，若整除则返回NULL，否则返回char*指向循环节。先写思路。函数原型：char*get_circle_digits(unsigned k,unsigned j) 

                                
                                
Java 日期 周 年
                                    Chen.H
javaC++cC#
                                    


/**
 * java日期操作(月末、周末等的日期操作)
 * 
 * @author 
 * 
 */
public class DateUtil {
	
    /** */
    /**
     * 取得某天相加(减)後的那一天
     * 
     * @param date
     * @param num
     *           
                                
                                
[高考与专业]欢迎广大高中毕业生加入自动控制与计算机应用专业
                                    comsci
计算机
                                    
 
 
      不知道现在的高校还设置这个宽口径专业没有,自动控制与计算机应用专业,我就是这个专业毕业的,这个专业的课程非常多,既要学习自动控制方面的课程,也要学习计算机专业的课程,对数学也要求比较高.....如果有这个专业,欢迎大家报考...毕业出来之后,就业的途径非常广..... 
 
     以后
                                
                                
分层查询（Hierarchical Queries）
                                    daizj
oracle递归查询层次查询
                                    
Hierarchical Queries 
 
If a table contains hierarchical data, then you can select rows in a hierarchical order using the hierarchical query clause: 
 
hierarchical_query_clause::= 
 
start with condi
                                
                                
数据迁移
                                    daysinsun
数据迁移
                                    
最近公司在重构一个医疗系统，原来的系统是两个.Net系统，现需要重构到java中。数据库分别为SQL Server和Mysql，现需要将数据库统一为Hana数据库，发现了几个问题，但最后通过努力都解决了。 
1、原本通过Hana的数据迁移工具把数据是可以迁移过去的，在MySQl里面的字段为TEXT类型的到Hana里面就存储不了了，最后不得不更改为clob。 
 
2、在数据插入的时候有些字段特别长
                                
                                
C语言学习二进制的表示示例
                                    dcj3sjt126com
cbasic
                                    
进制的表示示例 
# include <stdio.h>

int main(void)
{
	int i = 0x32C;

	printf("i = %d\n", i);
	/*
		printf的用法
		%d表示以十进制输出
		%x或%X表示以十六进制的输出
		%o表示以八进制输出
	*/

	return 0;
}
 

                                
                                
NsTimer 和 UITableViewCell 之间的控制
                                    dcj3sjt126com
ios
                                    
情况是这样的: 
一个UITableView, 每个Cell的内容是我自定义的 viewA viewA上面有很多的动画, 我需要添加NSTimer来做动画, 由于TableView的复用机制, 我添加的动画会不断开启, 没有停止, 动画会执行越来越多. 
  
解决办法: 
在配置cell的时候开始动画, 然后在cell结束显示的时候停止动画 
  
查找cell结束显示的代理
                                
                                
MySql中case when then 的使用
                                    fanxiaolong
casewhenthenend
                                    
select "主键",  "项目编号", "项目名称","项目创建时间", "项目状态","部门名称","创建人"

union

(select
	pp.id as "主键",
	pp.project_number as &
                                
                                
Ehcache（01）——简介、基本操作
                                    234390216
cacheehcache简介CacheManagercrud
                                    
Ehcache简介 
目录 
1       CacheManager 
1.1      构造方法构建 
1.2      静态方法构建 
2       Cache 
2.1&
                                
                                
最容易懂的javascript闭包学习入门
                                    jackyrong
JavaScript
                                    
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 
 
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 
下面就是我的学习笔记，对于Javascript初学者应该是很有用的。 
一、变量的作用域 
要理解闭包，首先必须理解Javascript特殊
                                
                                
提升网站转化率的四步优化方案
                                    php教程分享
数据结构PHP数据挖掘Google活动
                                    
网站开发完成后,我们在进行网站优化最关键的问题就是如何提高整体的转化率，这也是营销策略里最最重要的方面之一，并且也是网站综合运营实例的结果。文中分享了四大优化策略：调查、研究、优化、评估，这四大策略可以很好地帮助用户设计出高效的优化方案。 
PHP开发的网站优化一个网站最关键和棘手的是，如何提高整体的转化率，这是任何营销策略里最重要的方面之一，而提升网站转化率是网站综合运营实力的结果。今天，我就分
                                
                                
web开发里什么是HTML5的WebSocket？
                                    naruto1990
Webhtml5浏览器socket
                                    
当前火起来的HTML5语言里面，很多学者们都还没有完全了解这语言的效果情况，我最喜欢的Web开发技术就是正迅速变得流行的 WebSocket API。WebSocket 提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看6个HTML5教程介绍里 的 WebSocket API：它可用于客户端、服
                                
                                
Socket初步编程——简单实现群聊
                                    Everyday都不同
socket网络编程初步认识
                                    
初次接触到socket网络编程，也参考了网络上众前辈的文章。尝试自己也写了一下，记录下过程吧： 
  
服务端：（接收客户端消息并把它们打印出来） 
  
public class SocketServer {
	private List<Socket> socketList = new ArrayList<Socket>();
	 public s
                                
                                
面试：Hashtable与HashMap的区别（结合线程）
                                    toknowme

                                    
昨天去了某钱公司面试，面试过程中被问道 
Hashtable与HashMap的区别？当时就是回答了一点，Hashtable是线程安全的，HashMap是线程不安全的，说白了，就是Hashtable是的同步的，HashMap不是同步的，需要额外的处理一下。 
  
今天就动手写了一个例子，直接看代码吧 
package com.learn.lesson001;

import java
                                
                                
MVC设计模式的总结
                                    xp9802
设计模式mvc框架IOC
                                    
随着Web应用的商业逻辑包含逐渐复杂的公式分析计算、决策支持等，使客户机越 
来越不堪重负，因此将系统的商业分离出来。单独形成一部分，这样三层结构产生了。 
其中‘层’是逻辑上的划分。 
三层体系结构是将整个系统划分为如图2.1所示的结构[3] 
 
 
（1）表现层（Presentation layer）：包含表示代码、用户交互GUI、数据验证。 
该层用于向客户端用户提供GUI交互，它允许用户
                                
                
            
        
    


    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    


    

        

            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        
版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.