阅读 173

【CSS样式】—超详细+实践

CSS简介

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

CSS语法

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

选择器通常是你需要增加样式的名字,而声明则是具体的样式。

每条声明由两部分构成:属性和值。

 

有两种方式可以添加css样式:

1.在html页添加(始用于只在当前页所添加的样式)

<style>
body
{
	background-color:#d0e4fe;
}
h1
{
	color:orange;
	text-align:center;
}
p
{
	font-family:"Times New Roman";
	font-size:20px;
}
</style>
复制代码

 

2.外部样式表,在样式表中添加(适用于此样式应用于很多界面)

在html页中添加样式表链接,来关联样式表和html页。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
复制代码

在样式表中添加样式。

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
复制代码

CSS Id和Class

如果要在html中添加css样式,需要用到“id”和“css”选择器。

id选择器

Id选择器的样式用“#”来定义。

id选择器的名字不能重名。

假如定义a样式,在样式表中可以添加如下样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Winni</title> 
<style>
#a
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="a">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
复制代码

运行结果

 

Class选择器

类选择器的样式以一个点“.”表示。

类选择器可以在多个元素中使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Winni</title> 
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>
复制代码

运行结果

 

CSS Background

背景属性用于定义html元素的背景。

背景效果:

  • background-color
  • background-image
  • background-repeat (水平或者垂直平铺)
  • background-attachment(图像固定或者随着页面的其余部分滚动)
  • background-position(图像在背景中的位置)  
<style>
body
{
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    background-position:right top;
    margin-right:200px;
}
</style>
​
</head>
​
<body>
<h1>Hello World!</h1>
<p>背景图片不重复,设置 position 实例。</p>
<p>背景图片只显示一次,并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>
复制代码

运行结果

 

CSS text

  • color
  • direction(文本方向)
  • letter-spacing (字符间距)
  • line-height(行高)
  • text-align(对齐元素中的文本)
  • text-decoration(向文本添加装饰)
  • text-indent(缩进元素中的文本的首行)
  • text-shadow(设置文本阴影)
  • text-transform(控制元素中的字符大小写)
  • vertical-align(元素的垂直对齐方式)
  • white-space(元素中空白的处理方式)
  • word-spacing(设置字间距)

例子:文本添加装饰

<style>
h1 {text-decoration:overline;}//上边线
h2 {text-decoration:line-through;}//删除线
h3 {text-decoration:underline;}//下划线
</style>
复制代码

运行结果

例子:文本对齐方式

<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
复制代码

运行结果

 

CSS font(字体)

  • font(所有字体属性)
  • font-family (字体)
  • font-size (字体大小)
  • font-style(字体的样式)
  • font-variant(大写字母或者正常字体)
  • font-weight(字体的粗细)

例子:字体样式

<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
复制代码

运行结果

例子:字体大小(三中设置方式:em,百分比,像素)

<style>
body {font-size:60%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:13px;}
</style>
复制代码

运行结果

CSS 链接

1.未访问链接样式

2.已访问链接样式

3.鼠标移动到链接上

4.鼠标点击时

例子

<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="https://blog.csdn.net/hdy14" target="_blank">这是一个链接</a></b></p>
<p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
<p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
</body>
复制代码

运行结果

CSS盒子模型(box model)

css盒子模型本质上是一个盒子,里边包含:边距,边框,填充,实际内容

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

例子:设置文字的边框(ps:外边框是0,即默认元素在左上角贴边)

<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<body>

<img src="250x250px.gif" width="250" height="250" />

<div class="ex">上面的图片是250 px宽。
这个元素的总宽度也是250 px。</div>

</body>
复制代码

运行结果

 

CSS 表格

  • table (表格样式)
  • th(第一行的列)
  • td(其他行的列)
  • tr(行)

例子:日历(采用外置样式表)

html页

<body>
    <link href="StyleSheet1.css" rel="stylesheet" />
    <table class="clmonth" summary="Calendar for January 2019">
        <caption><!--标题-->
            January 2019
        </caption>

        <tr><!--第一行-->
            <th scope="col">Monday</th>
            <th scope="col">Tuesday</th>
            <th scope="col">Wednesday</th>
            <th scope="col">Thursday</th>
            <th scope="col">Friday</th>
            <th scope="col">Saturday</th>
            <th scope="col">Sunday</th>
        </tr>

        <tr><!--第二行-->
            <td class="previous">31</td>
            <td class="active">
                1

                <ul>
                    <li>今天要洗衣服喔</li>
                    <li>学习英语</li>
                </ul>

            </td>

            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>


        </tr>

        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td class="active">
                10

                <ul>
                    <li>今天要洗衣服喔</li>
                    <li>学习英语</li>
                </ul>

            </td>
            <td>11</td>
            <td>12</td>
            <td>13</td>


        </tr>

        <tr>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td class="active">
                19

                <ul>
                    <li>今天要洗衣服喔</li>
                    <li>学习英语</li>
                </ul>

            </td>
            <td>20</td>
        </tr>

        <tr>
            <td>21</td>
            <td class="active">
                22

                <ul>
                    <li>今天要洗衣服喔</li>
                    <li>学习英语</li>
                </ul>

            </td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
        </tr>

        <tr>
            <td>28</td><!--某一列-->
            <td>29</td>
            <td class="active">
                30

                <ul>
                    <li>今天要洗衣服喔</li>
                    <li>学习英语</li>
                </ul>

            </td>
            <td>31</td>

        </tr>

    </table>
</body>
复制代码

样式表(stylesheet)

.clmonth {
    border-collapse: collapse; /* 属性设置是否将表格边框折叠为单一边框:*/
    width: 780px; /*日历的整个宽度*/
}
  .clmonth caption {
        text-align:left;/*表格中文字的对齐方式:左对齐*/
        font:bold 130% Georgin, "Times New Roman";
        padding-bottom:6px;/*距离下边框的距离*/
        color:aquamarine;
    }

 .clmonth th {
        border:1px solid #999999;/*大小 实线还是虚线  颜色*/
        border-bottom:none;/*没有下边框*/
        padding:2px 8px 2px 8px; /*距离上、右、下、左边框的距离*/ 
        background-color:#ffd800;
        color:#2f2f2f;
        font:80% Verdana,Geneva,Aria,Helvetica,sans-serif;/*大小和字体*/
        width:110px;
    }

    .clmonth td {
        border: 1px solid #ffd800;
        font: 80% Verdana,Geneva,Aria,Helvetica,sans-serif;
        padding:2px 4px 2px 4px;
        vertical-align:top;/*垂直对齐方式*/
    }   

    .clmonth ul {
        list-style-type:square; /*无序列表中的列表项标志设置为方块。*/
        margin: 0;/*外边距*/
        padding-left: 20px;/*内边距*/
        padding-right: 26px;
    }

.clmonth {
    margin-bottom:15px;
}

.clmonth  td.previous,climont td.text{
    background-color:#ff6a00;
    color:#d97f7f;

}
.clmonth td.active {
    background-color:aquamarine;
    color:#2B5070;
    border:2px solid #ffd800;
}
复制代码

运行结果

 

CSS总结

以上都是本人认为最常使用和实用的css样式和实践。

想看更多css可以参考一个不错的网站:菜鸟教程

 

文章分类
前端
文章标签