黑马程序员技术交流社区

标题: 前端html和css [打印本页]

作者: 繁cy    时间: 2019-6-5 19:37
标题: 前端html和css
web
概念
javaweb 使用Java语言开发基于互联网的项目

*软件架构
    1>c/s  客户端
优点 :  用户体验好
缺点::  开发  安装  部署  维护 麻烦
例如  qq   迅雷

     2>b/s  浏览器/服务器端(url)
优点 1.开发 安装 部署 维护简单

.缺点:1.如果应用过大,用户的体验会收到影响
2.对硬件要求过高


静态资源
   1.HTML:用于搭建基础网页,展示页面内容
   2. CSS:美化页面,布局页面
   3.JavaScript:控制页面元素,让页面有一些动态的效果

==========
HTML  (最基础的网页开发语言)
超文本标记语言
超文本
标记语言<由标签构成的语言>*标记语言不是编程语言





CSS:
  1,概念:cascading Syyle Sheets   层叠样式表
  2好处:  
      <1>功能强大
       <2>将内容展示和样式控制分离
             *降低耦合度 ,解耦   *让分工更容易

3.使用 :
     1,内联样式(在标签内使用style属性指定cssa代码)<div style="color=  red">内容</div>(不推荐使用)
      2.内部样式(在head标签内,定义style签,style标签的标签体内容就是css代码  (常用)
      3.外部样式:1.定义css资源文件.
2.在head标签内,定义linkb标签,引入外部资源文件

****1.2.3作用域越来越大    1不常用   2.3.以后常用
4.语法
  *格式:
         选择器{
                   属性名1:属性值1;
                   属性名2:属性值2;
                   属性名3:属性值3;
                      .....}
      

5..选择器
  1.基本选择器:1>id选择器  (  #id 属性值{  }  )  2>元素选择器 ( 标签名称{  }  )  3> 类选择器   (  .class {  }  )



  2.扩展选择器:(  css 参考手册)
    1.选择所有的元素  (   *{}  )
     2.并集选择器   (    选择器1,选择器2{}   )
    3. 子选择器  (  选择器1  选择器2{}   )
     4.父选择器 (     选择器1> 选择器2  {}   )
    5. 属性选择器  :  选择元素名称,属性名=属性值的元素   (   元素名称  [属性名 = "属性值"]{}    )
     6伪类选择器   :选择一些元素具有的状态( 语法:  元素:状态{ }  )
     状态:   *  link:初始化的状态  
                *  visited:被访问过的状态
                *  action:正在访问的状态
                *   hover :鼠标悬浮的状态

6 属性 css 属性手册  
1. 字体、文本
                * font-size:字体大小
                * color:文本颜色
                * text-align:对其方式
                * line-height:行高
        2. 背景
                * background:
        3. 边框
                * border:设置边框,符合属性
        4. 尺寸
                * width:宽度
                * height:高度
        5. 盒子模型:控制布局
                * margin:外边距
                * padding:内边距
                        * 默认情况下内边距会影响整个盒子的大小
                * box-sizing: border-box;  设置盒子的属性,让width和height就是最终盒子的大小

                * float:浮动
                        * left
                        * right






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2