web前端---css(2)

本文隶属于分类

Web开发

广告推荐

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

标签:自动   col   fixed   table   路径   排列   inpu   rgba   内联对象   

第一章  css的四种引入方式

1.行内式
          行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

<p style="background-color: rebeccapurple">hello yuan</p><strong><br></strong>

2.嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3.链接式

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

 4.导入式
          将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中。

<style type="text/css">
 
                    @import"mystyle.css"; 此处要注意.css文件的路径
 
          </style> 

注意:  

 导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

二  CSS的常用属性 

1  颜色属性

1
2
3
4
5
6
7
<div style = "color:blueviolet" >ppppp< / div>
 
<div style = "color:#ffee33" >ppppp< / div>
 
<div style = "color:rgb(255,0,0)" >ppppp< / div>
 
<div style = "color:rgba(255,0,0,0.5)" >ppppp< / div>

2  字体属性

1
2
3
4
5
6
7
font - size:  20px / 50 % / larger
 
font - family: ‘Lucida Bright‘
 
font - weight: lighter / bold / border /
 
<h1 style = "font-style: oblique" >老男孩< / h1>

3  背景属性

background-color: cornflowerblue

background-image: url(1.jpg);

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom)

      简写:<body style="background: 20px 20px no-repeat #ff4 url(‘1.jpg‘)">

              <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url(‘1.jpg‘)"> 

如下代码所示:

web前端---css(2) - 爱上编程技术图片

背景属性还会定义图片的长和宽,是否重复,以及图片的位置。

4.block和inline-block、inline

  1. block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
  2. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):
    • 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
    • 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
  3. block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
  4. 一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。

二者的区别:

  • display:block
    1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
    2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
    3. block元素可以设置margin和padding属性。
  • display:inline
    1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
    2. inline元素设置width,height属性无效。
    3. inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
  • display:inline-block
    1. 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
 

5.position定位

position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

可能的值如下表所示:

描述
static 默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
relative 位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute 位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。
fixed 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。

web前端---css(2) - 爱上编程技术图片

 

 

 

web前端---css(2)

标签:自动   col   fixed   table   路径   排列   inpu   rgba   内联对象   

原文:http://www.cnblogs.com/qianmeng/p/7661064.html

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

广告推荐

讨论区