css 一行显示_CSS笔记

CSS(css cascading style sheets)层叠样式表

CSS 样式

    {

• •     行内式(内联样式表)

  • 内部样式表(内嵌样式表)

  • 外部样式表(外链式)

}

CSS选择器

    {          

        1. 标签选择器

        2. 类选择器

        3. ID选择器

}

### w3c标准规定，在同一个页面，不允许有相同名字的ID对象出现。

* 通配符选择器，选择所有标签，但是会匹配所有元素，会降低页面的响应速度，不建议随便使用。

font 字体

•     font-size

            定义字体尺寸，推荐使用px，谷歌浏览器默认的文字大小为16px。不同浏览器的字体尺寸默认值可能不同，使用时我们一般给一个明确值，一般给body指定整个页面的大小。

•     font-family

      设置哪一种字体，网页常用的字体有宋体，微软雅黑、黑体等。可以同时指定多个字体，中间以逗号隔开，浏览器会自动选择支持的字体，如果都没有，则以我们默认的字体为准。英文字体名必须位于中文字体名之前。若字体名中包含‘，# $ ’等符号，则改字体必须加英文状态的单引号或双引号。尽量使用系统默认的字体，保证在任何用户的浏览器中都能正确显示。

• font-weight

        定义字体粗细，属性有

      {

       normal(正常)、bold(加粗)、100~900 、400=normal、700=bold。平时数字用得比较多。

  }

•  font-sytle

                定义字体风格，属性有

            {

                       normal(正常)、italic(斜体的字体样式)

        }

利用font对字体样式进行综合设置。

    {    font：font-style; font-weight; font-size; line-height; font-family;}

CSS外观属性

• color(文本颜色)

• text-align(文本水平对齐方式)

• line-height(行间距)

• text-indent(首行缩进)

• text-decoration(文本的装饰)

• none(默认)

• underline(下划线)

• overline(不用，定义文本上的一条线)

• line-through(定义穿过文本下的一条线，不常用)

float浮动

css布局的三种机制：

         1. 普通流(标准流)

• • 块级元素独占一行，从上向下顺序排列，常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table。

  • 行内元素按照顺序，从左向右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em等。

  2. 浮动

• 让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示。

  3. 定位

• 将盒子定在浏览器的某一个位置。

行内块(inline-block)

        1.可以实现多个元素一行内显示，但是中间会有空白缝隙，也不能让盒  子左右对齐。

          浮动最早是用来控制图片，实现文字环绕图片的效果。

float属性：

        {

            none(默认)

            left(左浮动)

            right(右浮动)

}

浮动会改变元素的display属性，浮动元素会互相贴靠在一起。(没有空白缝隙)

导航栏的常用写法

li+a 使语义更清晰。直接用a ,搜索引擎容易辨别为有堆砌关键字的嫌疑(故意堆砌关键字容易被搜索引擎降权)，从而影响网站的排名。

浮动元素与父盒子的关系

    1.子盒子的浮动参照父盒子对齐。

    2.不会与父盒子的边框重叠，也不会超过父盒子的内边距。