css基础1

1.什么是 CSS?
    CSS 指层叠样式表 (Cascading Style Sheets)。
    它定义了如何显示HTML元素的样式【颜色\形状\尺寸.....】。
        HTML超文本标记语言是用来创建网页的内容。
2.CSS的作用?
    给网页[html]的元素/标记/标签设置样式的,以让HTML网页变得好看。
    为了解决内容【[html]的元素】与表现【样式】分离的问题

3.在HTML网页中如何使用CSS?
    1.内联定义 (Inline Styles)
    在html开始标记中通过style属性来设置当前元素的样式。
    缺点:使得原来的html标记变得复杂，不利于修改。
    场景:设置的样式很少的时候

2.内部样式块 (Embedding a Style Block)
    内部--html中
    块----集中设置样式属性
    在html的head标记中通过style标记集中设置样式属性
    缺点:设置的样式属性很多的时候，会使得html页面本身臃肿，出现喧宾夺主。
    场景:设置的样式很少的时候

3.链入外部样式表文件 (Linking to a Style Sheet)
    用一个独立的文件来保存样式，在html中通过link标记链接进来
第一步：建立外部样式表文件（.css）

第二步：在html的head标记中使用link标记导入样式文件。

4.CSS语法
   内部样式块声明定义css与链入外部样式表文件中的css写法相同
CSS 语法规则由两个主要的部分构成：
    1.选择器
    2.属性设置【一条/多条】

5.CSS选择器
    选择器---选中需要设置样式的html元素
    在一个html文件中会出现很多html元素，甚至会出现很多相同的元素，如果要为指定的某一个/某一组元素设置一套样式，就需要选择器
    1.元素选择器--根据html元素的名称选中一个/一组元素，设置样式

2.id选择器--根据html元素的id属性选中一个/一组元素设置样式【css--#[id]】

3.class选择器[类选择器]--根据html元素的class属性选中一个/一组元素设置样式【css--.[class]】

4.包含选择器---得到所有被父元素包含的子元素。

5.子元素选择器---得到指定父元素的直接子元素，而不是所有子元素。

注：子元素选择器应该可以得到一级元素下的二级元素及二级元素之下的三级元素

6.属性选择器--根据html元素上的属性名称以及属性值选择元素

6.CSS中的常用属性
    1.背景属性设置
    background-color：定义了元素的背景颜色
    background-image：定义了元素的背景图像，
    默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
        background-image：url('图片路径')
    background-repeat：设置背景图像水平或垂直平铺
        repeat--水平或垂直都平铺 
        repeat-x：水平平铺 
        repeat-y：垂直平铺 
        no-repeat：不平铺
    background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动。
        scroll:背景图片随着页面的滚动而滚动，这是默认的。
        fixed：背景图片不会随着页面的滚动而滚动。
    background-position: 属性设置背景图像的起始位置。
    left top  / left center / left bottom
        right top  / right center / right bottom
        center top / center center /center bottom
    x% y%    第一个值是水平位置，第二个值是垂直。
    左上角是0％0％。右下角是100％100％。
    如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％

2.文本属性设置
    color:设置文字的颜色
    text-align:设置文本的水平对齐方式[居中或对齐到左或右,两端对齐]
    vertical-align:设置一个元素的垂直对齐方式[top/middle/bottom]
    text-decoration:设置或删除文本的装饰
        underline：下划线
        overline：上划线
        line-through:删除线【贯穿线】
        none:没有线
    注意:text-decoration：none 可以消除超链接默认的下划线
    text-transform:    用来指定在一个文本中的大写和小写字母,可设置大写或小写字母，或每个单词的首字母大写。
        lowercase:小写字母
        uppercase:大写字母
        capitalize:首字母大写
    text-indent:指定文本的第一行的缩进
    letter-spacing:设置字符间距
    word-spacing:设置单词与单词之间的距离
    line-height:设置行高
    text-shadow :设置文字阴影
        text-shadow: 水平拉伸距离 垂直拉伸距离 清晰度 阴影颜色;