zoukankan      html  css  js  c++  java

  • css入门

    css分类

    根据css样式所放置的位置：分为三种：行间样式、内部样式、外部样式。

    行间样式：把样式写在标签里的style属性。例子：

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>行间样式</title>
 6 </head>
 7 <body>
 8 <!-- 把样式放在标签内的css叫做行间样式 -->
 9 <div style="100px;height:100px;background:red"></div>
10 </body>
11 </html>

    内部样式（头部样式）：在head标签里添加style标签，style标签包着样式。例子：

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>内部样式</title>
 6     <style type="text/css">
 7     .box{
 8         width: 100px;
 9         height: 100px;
10         background: red;
11     }
12     </style>
13 </head>
14 <body>
15 <!-- 把样式放在头部的style标签内-->
16 <div class="box"></div>
17 </body>
18 </html>

    外部样式：使用link标签引入层叠样式表。例子：

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>外部样式</title>
 6     <link rel="stylesheet" type="text/css" href="外部样式.css">
 7 </head>
 8 <body>
 9 <!-- 在头部使用link标签引用css的文档-->
10 <div class="box"></div>
11 </body>
12 </html>

    常用选择器：

    id选择器：#id名，同一个页面不能出现重复的id名。例子

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>id选择器</title>
 6     <style type="text/css">
 7     #box{
 8         width: 100px;
 9         height: 100px;
10         background: red;
11     }
12     </style>
13 </head>
14 <body>
15 <!-- id选择器： #id名 选择id为XXX标签-->
16 <!-- 在一个页面里id名只能出现一次 -->
17 <div id="box"></div>
18 </body>
19 </html>

    class选择器：.class名  class名在同一个页面可以重复多次。例子：

     

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>class选择器</title>
 6     <style type="text/css">
 7     .box{
 8         width: 100px;
 9         height: 100px;
10         background: red;
11     }
12     </style>
13 </head>
14 <body>
15 <!-- class选择器： .class名  选择class名为xxx的标签-->
16 <!-- 在一个页面里class名可以出现多次 -->
17 <div class="box"></div>
18 </body>
19 </html>

     

    标签选择器：标签名，例子：

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>标签选择器</title>
 6     <style type="text/css">
 7     div{
 8         width: 100px;
 9         height: 100px;
10         background: red;
11     }
12     </style>
13 </head>
14 <body>
15 <!-- 标签选择器： 标签名 选择该页面的所有标签名为XX的标签-->
16 <!-- 在一个页面里id名只能出现一次 -->
17 <div></div>
18 </body>
19 </html>

    群组选择器：id选择器/class选择器/标签选择器，id选择器/class选择器/标签选择器，其实群组选择器只是中间多了一个逗号隔开，用于选择一组元素。例子：

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>群组选择器</title>
 6     <style type="text/css">
 7     div,p,#head{
 8         width: 100px;
 9         height: 100px;
10         background: red;
11     }
12     </style>
13 </head>
14 <body>
15 <!-- 群组选择器： id选择器/clas选择器/标签选择器,id选择器/clas选择器/标签选择器-->
16 <!--  群组选择器 每个基本选择器之间有个逗号隔开，它控制一组元素的样式 -->
17 <div></div>
18 <p></p>
19 <h1 id="head"></h1>
20 </body>
21 </html>

    包含选择器(后代选择)：id选择器/class选择器/标签选择器 id选择器/class选择器/标签选择器，其实群组选择器只是中间多了一个空格隔开，用于选择子、孙级的标签。例子：

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>后代选择器</title>
 6     <style type="text/css">
 7     div p{
 8         width: 100px;
 9         height: 100px;
10         background: red;
11     }
12     </style>
13 </head>
14 <body>
15 <!-- 后代选择器： id选择器/clas选择器/标签选择器 id选择器/clas选择器/标签选择器-->
16 <!--  后代选择器 每个基本选择器之间空格隔开，选择某些元素的子元素 -->
17 <div>
18     <p></p>
19     <div>
20         <p></p>
21     </div>
22 </div>
24 </body>
25 </html>

     

    组合选择器：id选择器/class选择器/标签选择器id选择器/class选择器/标签选择器，他们之间没有空格，把两个选择器连接起来。例子：

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>锚点</title>
 6 <style type="text/css">
 7 div.box{
 8     width: 100px;
 9     height: 100px;
10     background: red;
11 }
12 </style>
13 </head>
14 <body>
15 <div class="box">s</div>
16 </body>
17 </html>

    css样式优先级（只和样式的权重和书写顺序有关）

     

    同等优先级情况下，默认后者覆盖前者

     

    标签选择器（权重1） <  class（权重10）  < id （权重100） < 行间样式（权重1000）

     

    常见样式

     

    css样式写法  属性：属性值；（例如width：400px；）

     

    width： 宽度

     

    height:  高度

     

    background: 背景

     

    backgound-color 背景颜色

    语法：

          background-color: red | #ffffff； 

          red : 英文颜色名称关键字

         #ffffff : 是一个RGB数字。

    background-image 背景图片

    语法：

     　　background-image: none | url ( url )；

    　　none : 是无背景图

    　　url : 里面跟的图片的路径。

    　　背景图片默认平铺。

    background-repeat ：

    　 background-repeat: repeat | no-repeat | repeat-x | repeat-y；

    　　repeat : 重复默认选项

    　　no-repeat : 不重复

    　　repeat-x : 横向重复。

    　　repeat-y : 纵向重复。

    background-attachment 值有scroll（背景图将随着屏幕滚动）、fixed（背景图不会随着屏幕滚动）

     

    background-position: 

    　　background-position: x轴坐标值  y轴坐标值；

     　　x轴 y轴坐标值：

    　　可以是像素值。background-position：10px 30px；

    　　可以是具体的方位。left | right | center | top | bottom

    　　可以是百分比。background-position：30% 50%；

     

    border 边框

     

    border-width 边框宽度

     

    border-style 边框样式

     

    border-color 边框颜色

     

    边框样式

     

    solid 实体

     

    dashed 虚线

     

    dotted点线(兼容性问题) 

    文本设置

    1.font-family

    font-family用于设置字体，语法为：

    font-family:字体1，字体2，字体3

    当浏览器没有找到第一个字体时会，寻找第二个字体，一直下去，如果没有找到可用的字体，则浏览器会使用默认的字体（每个浏览器都有自己的默认处理，风格可能不一致）。

     

    例子：

    Font-family:”宋体”,Arail,Tabhoma;

     

    注意： 1.中文页面建议以宋体

    2.英文页面建议以Arail/Tahoma

    3.中英结合网站建议最好使用英文字体

    4.特殊字体一律使用图片

     

    2.font-size

    font-size用于设置字体的大小，语法：

    Font-size;px|百分比|em

    1em=浏览器默认字体大小

     (页面文字大小最小12像素，文字大小都取偶数)

    例子：

    font-size:14px;

     

    注意：建议以px设置文字的大小，一般网页最小的字号是12px

     

    3.font-style

    font-style用于定义字体的风格，语法:

    font-style:normal | italic | oblique

    normal:常规字体  italic:斜体 oblique：倾斜

    此属性不常用

     

    4.font-weight

    font-weight;normal | bold | bolder | lighter | number

    normal:表示正常 bold:表示加粗 bolder:表示更粗的字符 lighter:表示更细的字符 number:100、200、...900d定义由粗到细的字符，400等同于normal,700等同于bold.

    normal、bold这两个的较常用。

     

    5.font 

    font是复合属性控制字体，它是font-style,font-weight,font-size,font-family的组合

    语法是:

    font:font-style|font-weight|font-size|font-family;

    例子：

    font:italic bold 12px “宋体”;

     

    6.color

    color用于设置文本的显示颜色,语法;

    color:颜色值

    第一种：使用关键字，如color;red;

    第二种：使用16进制数字，如color：#ffffff;

    使用16进制书写时，如果两位数字相同，可以进行缩写。例如#ffffff可以写成#fff.

    第三种；使用rgb的颜色书写，如：color:rgb(255,0,0);

     

    7.text-decoration

    text-decoration用划线，语法：

    text-decoration:none|underline|overline|line-through

    none:无文本修饰

    underline；表示有下划线

    overline;表示有上划线

    line-through:表示有贯穿线/删除线

    none与underline这两个属性值比较常用。

    例子：

    text-decoration:underline;

     

    8.line-height

    line-height用于设置行高，语法;

    line-height:normal|lenght;

    normal;浏览器默认的行距

    length:长度值，值越大，行距越大，可以设置负值。

    例子：

    line-height:30px;

    注意：在实际中line-height主要用在单行的垂直居中。

     

    9.text-indent

    text-indent用于控制文字或行内标签的缩进，语法：

    text-indent:length;

    length为长度值，单位是px或者em，允许为负值。

    例子

    text-indent：20px;

     

    10.text-align

    text-align用于文字或者行内元素的水平居中。语法：

    text-align:left | center | right | justify;

    left:左对齐 center水平居中 right 右对齐 justify两端对齐文本,其中justify并不常用

    例子：

    text-align:center;

     

    11.vertical-align

    vertical-align用于设置元素的垂直对齐方式，语法：

    vertical-align;top | bottom | middle;

    top:顶部

    bottom:底部

    middle:中间对齐

    注意：此属性除了table支持的比较好，其他标签不建议使用该属性。

     

    12.word-spacing

    word-spacing改变字（单词）之间的标准间隔。语法：

    word-spacing;normal | length;

    normal:默认值

    length:一个长度值，可以设置负值。单位可以是px或者em。

     

    13.letter-spacing

    改变字符之间的标准间隔

    letter-spacing: normal | length； 

    normal : 默认间隔

     length : 接受一个正长度值或负长度值。如果提供一个正长度值，那么字符之间的间隔就会增加。设置一个负值，会把它拉近。

     

     

     
  • 相关阅读:
    g++
    Adapter
    使用 JDBC 连接MySQL 、SQL Server数据库
    Chrom Firefox 非安全端口访问
    Cent OS & Windows 双系统自定义引导菜单
    Cent OS 7 安装海峰、极点五笔输入法
    数据结构:单链表
    切记要初始化指针
    Java 连接 MySQL 数据库
    C语言 Struct 结构体在 Java 中的体现
  • 原文地址：https://www.cnblogs.com/night2013/p/3585117.html
Copyright © 2011-2022 走看看