HTML Css

Html Css

一、引用Css的三种方式
二、Css的选择器·
三、字体样式
四、文本样式
五、边框样式
六、背景样式
七、其他样式
八、盒子模型

**注：每个标签都有<>只是在这里显示不出来我才没写<> **

一、引用Css的三种方式

html中特殊符号
空格：&NBSP
小于号：<
大于号：>

表单输入框
隐藏输入框：Input Type="HIDDEN"表单提交时，有一些不需要用户看到的，修改的数据可以放入隐藏输入框

Css
层叠样样式表，css是用来美化网页的
html可以想象成一个网页的骨架，css就是这个骨架的修饰（衣服）

css的基本语法：
属性名：属性值；（注意属性名都是提前设计好的）
列如：color:red;
1.行内样式表
h1 Style=“color:red;”/h1

2.内部样式表
head
style type=“text/css” 给所有的h2标签内容添加字体颜色
h2{ color:green; }
/style
/head

开发习惯：
h2…/h2
h2…/h2

3.外部样式表
①在项目下新建一个css目录，在目录下新建一个Common.css文件（文件名随意，后缀是css）.

②css文件的内容
p{
color:red;
}

③在需要使用该样式的html网页时，引用这个外部的css文件 type=“text/css” rel=“stylesheet” 两个属性是固定写法
href=“引入外部css文件的路径”

总结：在实际开发中，外部样式表使用最多
这几种方式可以同时应用于一个标签，
但是属性冲突时，会优先级区分
优先级 行内>内部>外部

二、css的选择器

1.ID选择器：#id名
作用：由于标签的id不能重复，所以id选择可以选择为一的某个标签
h1 id="t1"哈哈哈哈/h1
注意：当前网页中，其他标签的id不能叫做t1

2.标签选择器：标签名
作用：获取所有对应标签

3.class选择器：.class名[重要]
作用：获取所有拥有指定class属性值的标签

 
 ... 
 
  
 ... 
  
  
 ... 
    
  

4.父子选择器
选择器1 选择器2
作用：获取到选择器1选中标签内部对应选择器2选中的内容
例如: p a /* 获取p标签下的a标签 / .
c2 a / 获取class为c2的标签中的a标签 */

5.伪类选择器

 标签:hover{
         
 /*当鼠标悬浮在对应标签之上时，就会执行对应的样式*/      color:red;  }  
 例如：  a:hover{
          font-size:50px;  }

三、字体样式

font-size 设置字体大小 列如：font-size:10px;
font-family 设置字体类型 列如：font-family:‘隶书 微软雅黑’;
font-style 设置字体风格 列如：font-style:italic; /* italic 斜体 normal 正 常 */
font-style 设置字体的粗细 列如：font-weight:bold

四、文本样式

color 设置字体颜色 列如：color：red;
text-align 设置文本内容水平方向位置 列如：text-align:center;
line-height 设置标签的行高 列如：line-height:30px
text-decoration 文本装饰 列如：text-decoration:underline;
text-decoration 最大的用途：去掉超链接下划线 text-decoration:none；underline（下滑线) | none(无)

五、边框样式

border-color 设置边框颜色 例如：border-color:red; border-style 设置边框风格 例如：border-style:solid; /solid 实线/ border-width 设置边框宽度 例如：border-width:1px;

简写: border: 颜色 风格 宽度 (三个样式顺序无关) border: none; (无边框)

六、背景样式

background-color 设置背景颜色 background-color:red; background-image 设置背景图片 background-image:url(图片路径); background-repeat 设置背景图片平铺方式 background-repeat:no-repeat; (不平铺)
repeat (x轴/y轴都平铺) repeat-x (x轴都平铺) repeat-y(y 轴都平铺) background-position 设置背景图片的位置 例如：background-position: 100px 20px; /*100px 代表和左侧距离 20px 代表和上方距离 */ background-position: center; /背景图片居中/

七、其他样式

cursor 设置鼠标的样式 例如 cursor:pointer(鼠标会出现手试，类似于超链接)
float 设置元素浮动 例如 float:left (向左测浮动) float:right (向右侧浮动)
display 设置元素隐藏和显示 例如 display:none (隐藏) display:block (以块级元素显示)
display:inline (以行内元素显示)

八、盒子模型

网页布局的两个标签

 : div标签本身是一个块级元素（独占一行）,写在div里面的内容是没有样式 
 : span标签本身是一个行内元素,同样不会对写在span里面的内容增加样式   
盒

盒子模型是由四部分构成 外边距 边框宽度 内边距 内容宽度 margin 外边距 例如: margin:20px; 四边都产生20个像素的外边距 margin-left:20px; 左侧产生20个像素的外边距离 margin-right:20px; 右侧产生20个像素的外边距离 margin-top:20px; 上边产生20个像素的外边距离

margin-bottom:20px; 下边产生20个像素的外边距离 margin:10px 20px 30px 40px; 上右下左四个外距离 margin:10px 20px; 第一个数字设置上下外边距 第二个数字设置左右外边距 padding 内边距 padding和上边的外边距拥有相同的设置，无非是设置的边距位置不同而已 例如： padding:20px; padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px; padding:10px 20px 30px 40px; padding:10px 20px;

总结
font-size:10px; 字体大小
color:red; 字体颜色
display:none|block|inline 设置隐藏显示
margin 设置外边距
padding 设置内边距

标签