css初级小结

最新推荐文章于 2022-04-17 22:56:35 发布

aishai6058

最新推荐文章于 2022-04-17 22:56:35 发布

阅读量65

点赞数

原文链接：http://www.cnblogs.com/songjingwei/p/10536798.html

版权

HTML   概念    HyperText   Markup    Language
               超文本       标记        语言
注释   html不是真正的编程语言是标记语言

CSS 概念 Cascading Style Sheet s 层叠样式表
http 超文本传输协议

html都是有标签组成的，什么是标签？一对尖括号，包含的内容是标签
HTML 标签分为两种一种是双标签，一种是单标签
单标签<br/> <img src=""/>
<img src=""/>图片的路径

<heml></heml>   根标签
根标签中包含两个标签
一个是<head></head>头部标签   这里内容是给浏览器看的
一个是<body></body>主体标签   这里内容是给用户看的
双标签 <p></p>    段落标签   默认段前和断后有间距
  <h1></h1> 页面内容一级标题标签
  <h2></h2> 页面内容二级标题标签
  <h3></h3> 页面内容三级标题标签
  <h4></h4> 页面内容四级标题标签
  <h5></h5> 页面内容五级标题标签
  <h6></h6> 页面内容六级标题标签
  <a href="http://www.baidu.com">百度</a>
  href   里面写链接地址
注意缩进
父标签包含子标签的的时候，需要加个缩进按TAB键
<meta charset="utf-8">

最早 ASCLL编码
Unicode
汉字常用的编码 GB2312
繁体字 BIG5
万国码通用编码 utf-8
HTML 页面中设置字符编码的标签
<meta charset="utf-8">
带属性的标签的语法
<标签名属性名=“值”>标签的内容</标签名>
<!DOCTYPE html>声明文档格式   告诉浏览器用的是那种文档格式来解析当前文件
A超链接标签可以链接到图片，文档，压缩包，pdf，点击即为下载
img图片标签 src 属性图片路径
alt 属性替换文本
title 属性提示文本
width 属性宽度100
height 属性高度（如果高度和宽度只写一个，会等比例放大或缩小）
align 对齐方式 top middle bottom
position: absolute   绝对定位
backgound-color   颜色
html:5 快捷键
sublime 常用快捷键
!或者html:5 tab键快速生成基本格式
复制当前行   ctrl=shift=d
注释    ctrl+/
多光标编辑模式是 ctrl+单击
按住鼠标滚轮拖动可以选择对齐的内容
ctrl+shift+s 另存为
*通配符代表页面中所有标签
margin ：外边距
padding: 内间距
    ul{list-style:none;}
    list-style: 列表的样式 none 清空
    标签的常用属性：属性名=“属性值”
   <div class="">   类名
   Id    规定元素唯一的Id （结合js使用）
   style 行内的样式
   字符实体（特殊符号）
   空格    
   < <
   > >
   " "
   ￥ ¥
   圈c   ©
   colspan 横着合并
   rowspan 竖着合并
   HTML元素分为块元素行内元素行内块元素
   块元素的特点：独自占一行并且可以设置宽高代表：p div h1 table ul li ol dl dt dd
   行内元素的特点：不能独自占一行不能设置宽高
   代表： span a b strong u i
   行内块元素的特点：不能独自占一行可以设置宽高
   代表：img input

B标签仅仅是加粗效果
strong标签除了加粗效果还有强调的作用

一般情况下，写代码需要注意，块元素可以包含块元素也能包含行内元素，也能包含行内块元素
但是行内元素不能包含块元素

   行内元素转块元素 display:block;
   块元素转行内元素 display:inline;
   其他元素转行内块元素 display：inline-block;
   表单标签：<fromaction="表单提交的地址"method="get/post"></from>
   文本输入框<input type="text"name="yhm">
   这里的值为输入的信息
   密码<input type="password"name="mima">
   这里的值为输入的信息
   单选按钮<input type="radio"name="xingbie" value="男">
   这里的值是该按钮对应的内容
   复选框<input type="checkbox"name="aihao"value="">
   这里的值是该选项对应的内容
   下拉菜单<select name="city">
             选项<option value="bj">北京</option>选项有多个
             </select>
    多行文本输入框<textarer name="jianjie cols="20" row="5"></textarea>值是用户输入的信息
    提交按钮 <input type="submit" value="提交">
    重置按钮 <input type="reset" value="重置">
    get和post的区别：
    get 提交的表单信息显示在地址栏中，不安全，对提交的信息有大小限制
    post 提交的表单信息相对安全提交文件大小没有限制

    盒子模型
    padding: 内间距内容距离border(边框)直接的值。是一个综合样式包含上下左右四个方向的内间距
    padding-top:10px上
    padding-right:20px右
    padding-bottom:30px 下
    padding-left:40px 左
    可以写成：
    padding:10px20px30px40px;
    注意：如果上下一致左右一致可以简写 padding:10px 20px;

   Border:边框
   BORDER:10px solid red;
   线型有三种常用实线solid 虚线 dashed 点线 dotted;
   单个写 border-right:10px solid red;

   Margin 外边距盒子与其它盒子之间的距离
   Margin-top:10px;
   Margin-right:10px;

盒子的宽高=设置的宽高+左右padding的值+左右border的值
不包含margin的值

设置盒子在浏览器里，居中显示
.box{margin:0 auto}

   设置盒子中文字的样式
   text-align: center;设置字体的对齐方式
   color: blue;
   font-size: 40px;字体大小
   font-family: "隶书"; 字体
   font-weight: bold; 是否加粗 norma
   line-height: 60px; 行高

浮动：float:left;float:right;
当元素添加了浮动以后，就脱离了标准流。

   问题，如果子盒子浮动以后，父盒子没有写高度，父盒子高度为0（不会被子盒子撑开）
   解决方法：清除浮动
   1.在浮动的元素后面增加一个空盒子增加样式 clear:both;
   2.给父盒子增加样式 overflow:hidden;
   本来的意思是超出部分隐藏。在这里的作用是清除浮动。（用的比较少）
   如果父盒子中所有子盒子都浮动了，父盒子的高度没有写，那么父盒子的高是0.

   CSS CASSCADING STYLE SHEETS 层叠式样表
   Div+css布局的作用：（table布局与Div+css布局的区别）
       解决内容与表现分离的问题

css三大特性：层叠性继承性优先级

Css 样式有三种写法：

       行内式   只能给当前标签使用 <div style="color:red"></div>
       内嵌式    只能给当前页面使用 <head> <style type="text/css"> .box{color:red} </style> </head>
       外链式    可以给任意引入该样式文件的页面使用
       <link rel="stylesheet" href="css/index.css">
       外链式<内嵌式<行内式
      优先级别

       语法：
       选择器{属性名：属性值}

       基本选择器：
       标签选择器 div{color:red}
       类选择器。box{}
       id选择器 #box
       通配符选择器 *
       优先级别：

！inportant>行内>id>类型>标签>通配符选择器
继承性：所有的文字相关的样式都会继承。（a的下划线颜色不会继承父盒子 h标签的字体也不会继承）

       css复合选择器   子交并后
       并集选择器 div，li,.box,#list{color:red;}
       子代选择器 div>li{color:red;}
       后代选择器 div{color:red;}
       布局
       标准流 div 设置宽高，设置内间距和外间距
       所有元素在页面中都占据位置。
       浮动：所有元素都脱离标准流(都不在页面中占据位置)
  带来的问题：父
问题，如果子盒子浮动以后，父盒子没有写高度，父盒子高度为0（不会被子盒子撑开）
   解决方法：清除浮动
   1.在浮动的元素后面增加一个空盒子增加样式 clear:both;
   2.给父盒子增加样式 overflow:hidden;
   本来的意思是超出部分隐藏。在这里的作用是清除浮动。（用的比较少）
   如果父盒子中所有子盒子都浮动了，父盒子的高度没有写，那么父盒子的高是0.

   CSS CASSCADING STYLE SHEETS 层叠式样表
   Div+css布局的作用：（table布局与Div+css布局的区别）
       解决内容与表现分离的问题

css三大特性：层叠性继承性优先级

Css 样式有三种写法：

       基本选择器：
       标签选择器 div{color:red}
       类选择器。box{}
       id选择器 #box
       通配符选择器 *
       优先级别：

！inportant>行内>id>类型>标签>通配符选择器
继承性：所有的文字相关的样式都会继承。（a的下划线颜色不会继承父盒子 h标签的字体也不会继承）

       css复合选择器   子交并后
       并集选择器 div，li,.box,#list{color:red;}
       子代选择器 div>li{color:red;}
       后代选择器 div{color:red;}
       布局
       标准流 div 设置宽高，设置内间距和外间距
       所有元素在页面中都占据位置。
       浮动：所有元素都脱离标准流(都不在页面中占据位置)
  带来的问题：父盒子没有设置高度，子盒子浮动，父盒子高度为0
  清除浮动的三个方法：
  1.增加空的div 设置clear:both;
  2.给父盒子增加样式 overflow:hi
  3.给父盒子增加伪元素
  .box:after{
  content:"";
  display:block;
  clear:both;
  }
  定位：所有元素都脱离标准流（都不在页面中占位置）
  定位的盒子居中
   1.position:absolute;
   left:50%;
   margin-left:负的盒子宽度的一半;
   2.position:absolute;
   left:0;
   right:0;
   margin:0 auto;