css入门

用户7659386081748
80 阅读4分钟

css cascading style sheet(层叠样式表) css本质是声明规则，用于屏幕上渲染html、xml 1.浏览器 浏览器的组成部分：shell（外壳呈现出的页面效果） 内核（浏览器内部使用的技术手段渲染rendering引擎/JS引擎）

（浏览器厂商：Google Chrome  webkit/blink
             \firefox       gecko
             \IE            trident
             \safari        webkit
             \opera         presto  opera现在属于360和昆仑万维，已被收购）
             *360\qq仅是在shell网页进行了包装，没有内核设计

*JS引擎（coogle的V8） JIT just in time compilation(即时编译)

2.css基本写法 权重：内联样式 > 内部样式表 > 外部样式表 但不建议内联样式，除

后台引入数据
选择器 { 属性名 ：属性值； } （1）选择器（5种常见的基本选择器）：通配选择器，类选择器，元素选择器，ID选择器和群组选择器。 选择器是一种模式，用于选择需要添加样式的元素，主要用来确定html的树形结构中的DOM元素节点。

*优先级

（2）字体样式

  属性
  font-family        字体类型
  font-size          字体大小
  font-weight        字体粗细
  font-style         字体风格
  color              字体颜色

（3）文本样式

*字体样式针对的是“文字”形体效果，文本样式针对的是“整个段落”的排版效果

 属性
 text-indent      首行缩进
 text-align       水平对齐
 text-decoration  文本修饰
 text-transform   大小写
 line-height      行高
 letter-spacing、word-spacing  字母间距、词间距

1656835585964.png

     <style tyle="text/css">
     .cc span{text-decoration:line-through;}
   </style>
     <p class="cc">只要
      <span >520,</span>只要
      <span >520,</span>只要250！！！
     </p>

*span元素是短语内容的通用行容器，行内元素
(3)边框样式

   属性
   border-width  边框的宽度
   border-style  边框的外观
   border-color  边框的颜色
   border-top、bottom、right、left

（4）列表样式

   列表项符号 list-style-type
   属性值（有序列表ol）
   decimal   阿拉伯数字：1、2、3...
   lower-roman  小写罗马数字
   upper-roman  大写罗马数字
   lower-alpha  小写英文字母
   upper-alpha  大写英文字母
    （无序列表ul）
    disc        实心圆（默认值）
    circle      空心圆
    square      正方形

*list-style-type:none

list-style-image:url(绝对路径) 一般情况不用该属性实现，而是使用高级的字体图标（iconfont）

(5)表格样式 表格标题位置（caption-side）

  属性值
  top
  bottom

border-collapse：取值；

  separate        边框分开，有空隙（默认值）
  collapse        边框合并，无空隙

border-spacing（表格边框间距）:像素值；

（6）图片大小 关于性能优化问题，不建议使用大图片借助该方法改变大小，一般需要多大图片，就用ps制作多大图片 img是块级元素

width：像素值； height：像素值；

图片边框 同使用border属性

图片水平对齐 使用text-align

*图片是在父元素中水平对齐，因为是在图片的父元素中定义的

垂直对齐 vertical-align:取值(top\middle\baseline基线对齐\bottom)；

*还需了解垂直对齐的定义

（7）文字环绕 float:left\right； （8）背景样式（背景颜色 background-color或背景图片）

 背景图片の属性
 background-image:url();   定义背景图片地址
 background-repeat  定义背景图片重复（横向、纵向）
 background-position 定义背景图片位置
 background-attachment 定义背景图片固定
 background-size    定义背景图片自适应

（9）超链接样式

 超链接伪类
 a:link{...}       定义a元素未访问时的样式
 a:visited{...}    定义a元素访问后的样式
 a:hover{...}      定义鼠标经过a元素时的样式
 a:active{...}     定义鼠标点击激活时的样式
 
* :hover{...}hover伪类可以定义任何一个元素在鼠标经过时的样式

（10）鼠标样式 cursor:取值（default、pointer、text...）； 自定义鼠标样式 cursor:url(图片地址，一般鼠标图片后缀名都是.cur)，属性值； （11）盒子模型

 content  内容，可以是文本或图片
 padding  内边距，用于定义内容与边距之间的距离
 margin   外边距，用于定义当前元素与其他元素之间的距离
 border   边框，用于定义元素的边框
 
 浮动 float
 定位 position：fixed固定定位/relative相对定位/absolute绝对定位/static静态定位(默认值)
avatar
文章
阅读
粉丝