HTML+CSS基本语法构造

最新推荐文章于 2024-07-21 20:52:32 发布

a1376871144

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量760

点赞数 2

分类专栏： html+css+JavaScript

本文链接：https://blog.csdn.net/a1376871144/article/details/88768258

版权

html+css+JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>

<title> 这里面输入此网页的标题</title>

</head>

<body>

<h1>输入文章标题<h1>

<p> 声明文章段落

<strong> 加粗字体

<u> 下划线

<em> 斜体

<span> css样式

<q> 引用相当于加“”

<blockquote> 段落文章引用

<br> 相当于回车（换行）

  空格

<hr> 分割线

<code> 用来声明短代码块

<pre> 用于声明长代码块

<ul> 无数字排序的列表

<li> 具体列表输入

<ol> 有数字排序的列表

<li>

<div> 分块

<div id="1"> 分块有名称例如此分块名称为：1

<table> 表格里面可以输入表格样式如：<table border="0" font-align="center" font-size="10px"> 边框为无，字处中间，字体大小为10px;

<caption> 表格名称

<th> 表格中第一行

<tr> 表格中的行

<td> 每一行中的一个列

<!--在CSS中，都可以在head标签之间声明表格的样式

如：<style type="text/css" >

table,tr,td,th{

font-size：20px;

color:red;

}

此处声明表格字体为红，大小为20px

-->

<a herf="www.baidu.com">链接标签，这里面可以是文字，图片等</a>

<img src=" 图片源" title=""/> 图片声明 title鼠标在图片上面可以显示图片标题

<from method="" action=""> from表单声明 method分享方法（一般是post） action 行为一般上传到哪

<label for="">标签一般输入文本</label>

<input type="" id="" value=""> 一般用于显示文本框密码框按键

type一般有几中形式text文本框 password密码框 submit提交按钮 reset重置按钮 radio单选 checked 多选

id一般用于后面文件处理时的名称

value是上传的值比如radio中男女例子男是1 女是2

<select> 复选下拉框

option 下拉框选项

CSS中样式有三种----内联式>嵌入式>外部式

内联式：直接在文本中使用，在文本中声明。如：<span style="font-size：20px;....">文本</span>

嵌入式:在head之间声明,在文本中使用

外部式：在此html文件外创建一个css文件。文件里面写样式，然后在head之间用<link href="此声明来源" rel="" type="text/css">

选择器一般有八种，标签选择器，类选择器，ID选择器，子代选择器，后代选择器，伪选择器，通用选择器，分组选择器；

这里所说的选择器一般指的是CSS样式，在head之间

标签选择器：直接用标签进行样式选择：例如：p{ font-size：20px; color:#000; }

类选择器：声明样式时前面加点(这个 . )，使用时声明class=""；来选择哪个类的,例如： .stress{ font-size：20px; color:#000; }  <p class="stress">文本</p>

ID选择器：声明样式时前面加点(这个 # )，使用时声明id=""；来选择哪个类的,例如： #stress{ font-size：20px; color:#000; }  <p ID="stress">文本</p>

子选择器：即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码： .food>li{border:1px solid red;} 只延生使用在指定的下一代，也就是说第一代的 li 标签会使用这种样式，而如果此代下面还有 li 标签，那下代 li 标签不适用

后代选择器：故名思意，与子代选择器的区别是子代是延生一代，而后代则是所有的后代，孙子，重孙，，，等等是要是后代都使用此样式，例如： .food li{border:1px solid red;}

通用选择器：所有样式得使用都不用指定，自动给所有加上，例如：* {color:red;}

伪选择器：它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red;} 一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。因为兼容性，现在比较常用的还是 a:hover 的组合。

分组选择器：可以同时设置多种标签，例如：p,span,.stress{color:blue; }，给三个标签设置了同种样式

CSS的继承、层叠和特殊性

继承：继承就是此标签样式不仅应用自己，也应用其后代，但border这种样式不适用

特殊性：有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢？权值就诞生了，权值高的被使用，标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。可以叠加。注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

层叠：如果应用的标签一样，权值相同，那怎么办呢，那么谁最后声明用谁，

重要性：我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。例如：p{color:red !important ;}

CSS格式化排版

字体：例 font-family:"宋体";

字号，颜色： font-size:20px; color:red;

粗体：font-weight;blod;

斜体：font-style:italic;

下划线：text-decoration:underline;

删除线：text-decoration:line-through;

首行缩进：text-indent:2em;

行高：line-height:2em;

字体间距：letter-spacing: 20 px;

对齐：text-align:center;

元素分类

常用的块状元素有：

常用的内联元素有：

常用的内联块状元素有：

盒模型

边框：例如：

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

      border-color:#888;//前面的井号不要忘掉。
  border-width（边框宽度）中的宽度也可以设置为：
      thin | medium | thick（但不是很常用），最常还是用像素（px）。

同样可以使用下面代码实现分别四边边框的设置：

       border-top:1px solid red;
       border-right:1px solid red; 
       border-left:1px solid red;
       border-bottom:1px solid red;

可以使用任意一种；

宽度和高度：

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的高度也是同理。

比如：

css代码：

        div{
            width:200px;
            padding:20px;
            border:1px solid red;
            margin:10px;    
           }

填充：元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：div{padding:20px 10px 15px 30px;}

顺序一定不要搞混。可以分开写上面代码：

         div{
             padding-top:20px;
             padding-right:10px;
             padding-bottom:15px;
             padding-left:30px;
             }

边界：边界依然，元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：div{margin:20px 10px 15px 30px;}

也可以分开写：

          div{
               margin-top:20px;
               margin-right:10px;
               margin-bottom:15px;
               margin-left:30px;
              }

css布局模型

在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

流动模型自带模型

浮动模型： float:left; 靠左

层次模型：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素

2、参照定位的元素必须加入position:relative;

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

盒模型代码简写

还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：

           margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

a1376871144

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录