1. 云栖社区>
  2. 技术资料>
  3. 正文

css_基础教程

作者:用户 来源:互联网 时间:2016-09-11 14:04:41

标签属性font-family

css_基础教程 - 摘要: 本文讲的是css_基础教程, 说到CSS就不得不提到div了,现在呀布面的布局结构不能想以前的那样用table排版了,如果还用table的话,那就太士了,你说是不是呀,现在晚了,明天继续我们web学习之路.希望大家支持黑侠客。 1、css的应用       1

说到CSS就不得不提到div了,现在呀布面的布局结构不能想以前的那样用table排版了,如果还用table的话,那就太士了,你说是不是呀,现在晚了,明天继续我们web学习之路.希望大家支持黑侠客。
1、css的应用
      1、行内样式:如<p style="font:small; font-size:36px">sdfasfdasdf</p>
      2、页面嵌入式:如    <style type="text/css">
                           <!--
                             p {
                                 text-decoration: underline;
                               }
                            -->
                          </style>
      3、导入外部 <link href="1.css" rel="stylesheet" type="text/css">
2、css的选择器,属性和值
    HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的样式命名。
  每个选择器都有属性在{}里面,比如简单点像color,font-weight或background-color。
  值在冒号(不是等号)后面,分号分离属性。如:

body {
    font-size: 0.8em;
    color: navy;
}
上面的意思是为body选择器设置font-size字体大小和color字体颜色。所以基本的,当它作用与HTML页面时,在body标签(整个窗口中的内容)之间的文字颜色是navy字体大小是0.8ems。
3、css的颜色设置
   color和background-color两者,两者可以在任何绝大部分html元素,包括body上使用,只要在标签中设置color字体的颜色和background-color背景颜色即可。

h1 {
    color: yellow;
    background-color: blue;
}
4、css的文本字体设置
   字体的设置:font-family;
   字体的大小:font-size;
   字体是否加粗:font-weight;
   字体是否斜体:font-style;
   英文的字体是否大小写font-transform;
   字体是否要下划线:font-decoration;
   中文和字母之间的间距:letter-spacing和word-spacing;
   行高:line-height;
   元素的位置: text-align;

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 0.8em;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.5em;
}
a {
    text-decoration: none;
}
strong {
    font-style: italic;
    text-transform: uppercase;
}
p {
    letter-spacing: 0.5em;
    word-spacing: 2em;
    line-height: 1.5;
    text-align: center;
}
5、说到下面的东西先说一下盒子模型
   
                             CSS盒子模式
     这个里面涉及到margin padding border及中间内容部分的width,height.下面先分别说一下,再总结一下.
6、margin和padding的设置
   两者都是隔开间距的,margin是隔开元素与外边的间距,也就是外边距,而padding是隔开元素内的间距,也就是内边距。他们都有上下左右四个方向的设置。元素四边可以设置的属性:margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left ;

h2 {
    font-size: 1.5em;
    background-color: #ccc;
    margin: 1em;
    padding: 3em;
}
7、css的border的设置
  它总共有border-width || border-style || border-color分别表示宽度,样式,颜色。 每个又分为 上下左右四个方向.

h2 {
    border-style: dashed;
    border-width: 3px;
    border-left-width: 10px;
    border-right-width: 10px;
    border-color: red;
}
8、CSS属性结合起来使用

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 80%;
    color: black;
    background-color: #ffc;
    margin: 1em;
    padding: 0;
}

/* By the way, this is a comment */

p {
    line-height: 1.5em;
}

h1 {
    color: #ffc;
    background-color: #900;
    font-size: 2em;
    margin: 0;
    margin-bottom: 0.5em;
    padding: 0.25em;
    font-style: italic;
    text-align: center;
    letter-spacing: 0.5em;
    border-bottom-style: solid;
    border-bottom-width: 0.5em;
    border-bottom-color: #c00;
}

h2 {
    color: white;
    background-color: #090;
    font-size: 1.5em;
    margin: 0;
    padding: 0.1em;
    padding-left: 1em;
}

h3 {
    color: #999;
    font-size: 1.25em;
}

img {
    border-style: dashed;
    border-width: 2px;
    border-color: #ccc;
}

a {
    text-decoration: none;
}

strong {
    font-style: italic;
    text-transform: uppercase;
}

li {
    color: #900;
    font-style: italic;
}

table {
    background-color: #ccc;
}
这个只要能明白是什么意思就行了

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索标签 , 属性 font-family 结构化查询语言、css入门经典、css基础教程 pdf、html与css入门经典、css权威指南,以便于您获取更多的相关知识。

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

6款热门基础云产品6个月免费体验;2款产品1年体验;1款产品2年体验

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

开发者常用软件,超百款实用软件一站式提供