码迷,mamicode.com
首页 > Web开发 > 详细

html和css

时间:2018-07-29 00:53:26      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:头部   tom   style   使用   行高   写法   距离   对齐   ott   

前端开发也叫作微博前端开发

前端开发是为b/s架构的软件提供界面解决方案的

HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。

快速创建html文档的快捷键:!+tab键,或者 html:5+tab键

 

块元素标签:默认占有一行

内联元素标签:默认可以排列在一行

Ctrl+/ 注释   

1、h1~h6:  标题标签,块元素标签,含有默认样式

2、P:  段落标签,块元素标签,含有默认样式

3、字符实体:如果想在网页上显示空格,“<”个“>”, 不能直接在代码中写,需要写成它们的字符实体,空格:&nbsp;   小于号:&lt;   大于号 &gt;

4、div:  通用块元素标签,一般做嵌套使用,没有默认样式

5、a :链接标签,属于内联元素标签,通过herf属性设置链接地址,将a标签包裹img标签可以用图片做链接,默认链接地址写成“#”

6、img:  图片标签,属于内联元素标签,通过src属性设置图片地址,通过alt设置图片文字说明

7、span: 通用内联元素标签,一般用在样式设置中

注释:<!-- 这是一段注释  -->
换行:<p>这是一行文字,<br>这是一行文字</p>

 

css的定义方法是:选择器 { 属性:值; 属性:值; 属性:值;}

div{ 
    width:100px; 
    height:100px; 
    background:gold; 
}

css引入页面的三种方式:

1、内联式:通过标签的style属性,把样式写在标签中

2、内嵌式:通过style标签,把样式写在head标签中

3、外链式:外部创建一个css文件,页面通过link标签引入

 

css三种选择器:

1、标签选择器:写法和标签名相同,会选择所有的标签

2、类选择器:名称任意,名称前需要加“.”,标签通过class属性引用

3、层级选择器:通过层级关系匹配标签

css布局常用样式属性:

  • width 设置元素(标签)的宽度,如:width:100px;

  • height 设置元素(标签)的高度,如:height:200px;

  • background 设置元素背景色或者背景图片,如:background:gold; 设置元素背景色为金色

  • border 设置元素四周的边框,如:border:1px solid black; 设置元素四周边框是1像素宽的黑色实线

以上也可以拆分成四个边的写法,分别设置四个边的:

  • border-top 设置顶边边框,如:border-top:10px solid red;

  • border-left 设置左边边框,如:border-left:10px solid blue;

  • border-right 设置右边边框,如:border-right:10px solid green;

  • border-bottom 设置底边边框,如:border-bottom:10px solid pink;

  • padding 设置元素包含的内容和元素边框的距离,也叫内边距,如padding:20px;padding是同时设置4个边的,也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。

  • margin 设置元素和外界的距离,也叫外边距,如margin:20px;margin是同时设置4个边的,也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。

  • float 设置元素浮动,浮动可以让块元素排列在一行,浮动分为左浮动:float:left; 右浮动:float:right;

文本常用样式属性一:

  • color 设置文字的颜色,如: color:red;

  • font-size 设置文字的大小,如:font-size:12px;

  • font-family 设置文字的字体,如:font-family:‘微软雅黑‘;为了避免中文字不兼容,一般写成:font-family:‘Microsoft Yahei‘;

  • font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

  • line-height 设置文字的行高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px

  • text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉

  • text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中

  • text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px

样式注释  :  /* 设置头部的样式 */

html和css

标签:头部   tom   style   使用   行高   写法   距离   对齐   ott   

原文地址:https://www.cnblogs.com/Jack666/p/9383958.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!