HTML+CSS基础(三)  CSS的引入方式和CSS选择器-张柏沛IT博客

正文内容

HTML+CSS基础(三) CSS的引入方式和CSS选择器

栏目:Web前端 发布时间:2019-11-20 21:21 浏览量:218

一、CSS概念:

什么是CSS,CSS说白了就是给页面添加样式,让整个页面变的好看起来的一种东西,用来定义网页外观,如字体、背景、颜色等

 

二、在页面中使用css的3种常用方式

1.行内样式

就是在一个标签内使用 style 属性,仅为某一个标签添加样式

例如

<p style="font-size:16px">文字</p>

 

2.内嵌式

就是将样式写在<style>标签中

<style>
    ul{
        list-style:none;
    }
</style>

 

3.外链式

<link rel="stylesheet" href="./1.css" type="text/css">

 

三种方式的优先级: 行内样式最高,其他方式则取决于放置的先后顺序,后面的会覆盖前面的

 

三、基本语法
        1. CSS语法
                选择器:   负责圈定范围,要修改的元素的集合
                声明   :  由属性和属性名组成,中间用冒号隔开(属性名:属性值),用于设定具体的样式
                格式   :  选择器{属性1:值; 属性2:值; 属性3:值 ....}
        2. CSS注释
                样式里面注释就一种  /*注释 */
                                html中的注释  <!--   -->
        3. 单位
                3.1 长度单位
                      em                 倍数  相对于默认字体大小16px
                      px            像素 pixel 屏幕上显示的最小单位(推荐)
                      %            百分比   设置font-size 相对于默认字体大小16px  设置宽度高度相对于父元素宽度
                      pt            标准长度单位    1pt=1/72英寸     用于印刷业, 非常简单易用
                      PPI(DPI) 每英寸像素点数 pixel(dot) per inch 表示清晰度、精度
                      cm/mm 厘米/毫米
                      附公式:px = pt * DPI /72
                3.2 颜色单位
                      ① 英文单词  red  green  yellow .....
                      ② 十六进制 #rrggbb   00-ff    
                      ③ rgb  数字  百分比  rgb(0~255, 0~255, 0~255)
                      ④ rgb(0%~100%,0%~100%,0%~100%)


四        选择器
        1. HTML选择器        
            标签名{ }
        2. ID选择器
            #ID名{ }
            一个页面一个ID名只能给一个元素
        3. CLASS选择器  
            .class名{ }
        4. 关联选择器
            选择器 选择器{ }
        5. 组合选择器
            选择器,选择器,选择器....{ }
        6. 伪元素选择器(IE6 仅支持a标签)
            选择器:hover    鼠标悬停在上面(重用)
            选择器:active    鼠标点击的时候
            选择器:visited    鼠标点击过后
            选择器:link        开始状态

选择器补充:

1. 元素选择符
通配符选择符*{
padding:0;}              
类型选择符                    
ID选择符                        
类选择符            

            
2. 关系选择符
包含选择符    E F
子选择符      E>F  
相邻选择符    E+F
兄弟选择符    E~F


3. 属性选择符
E[attr]
E[attr=""]
E[attr^=""]
E[attr$=""]
E[attr*=""]
E[attr~=""]
E[attr|=""]


4. 伪类选择符
E:link        鼠标没有放上去时
E:visited     访问完后
E:hover       鼠标放上去时
E:active      点击时
E:focus       获取焦点时
E:lang(fr)
E:not(s)      除了
E:root
E:first-child
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)
E:checked
E:disabled
E:enabled
E:target            


5. 伪对象选择符
E::first-letter
E::first-line
E::after
E::before
E::input-placeholder  (加私有前缀)
E::selection


五     CSS常见属性和值
        1. 字体属性
                font                    设置字体所有的属性   font:[font-style] || [font-weight] || [font-variant] ? <font-size> <font-family>
                font-family            设置字体库(黑体 宋体 微软雅黑.....)
                font-size            设置大小(px em % pt in cm mm)
                font-style           设置字体风格    值: normal(正常 默认)   italic(斜体)   oblique(斜体)
                font-weight             设置字体粗细    值:     normal(默认)  bold(粗)  bolder(更粗)  lighter(细)   100-900(数值大于600是加粗)
                font-variant         设置字体变形   normal  small-caps(小写变大写)
        2. 颜色属性
                color    设置字体颜色(四种表示颜色的方法)
        3. 背景属性
                background    
                综合写法                        
                background: [color] [image] [repeat] [position] [attachment]
                background-color                设置背景颜色    颜色单位
                background-image                设置背景图片   url('地址')
                background-repeat                设置背景图片平铺方式            repeat(默认值)        no-repeat   repeat-x   repeat-y
                background-attachment        设置背景图片附加信息            值:     scroll(默认)        fixed
                background-position            设置背景图片位置                    left/right/center/number px top/center/bottom/number px    
        4. 文本属性
                letter-spacing  字母与字母之间的间距
                word-spacing    单词与单词之间的间距
                text-decoration 对文本划线的控制 overline  上划线  underline  下划线 line-through 中划线  none 没有线
                text-align      文本的水平对齐方式  left  right    center justify
                vertical-align  文本的垂直对齐方式,不太常用,一般文本的垂直对齐我们使用的是行高=框的高度     baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
                text-indent     首行缩进
                line-height 重要 文本的垂直对齐方式
                word-wrap       当一个单词到达边际时没显示完的处理方式
                normal 溢出  break-word 换行显示
                text-transform  大小写转换  none capitalize 首字母大写  uppercase 全部大写 lowercase 全部小写
        5. 边框属性
                综合写法
                border :边框宽度 边框样式 边框颜色
                border :10px solid red
                [ border-width ]: 设置或检索对象边框宽度。
                [ border-style ]: 设置或检索对象边框样式。
                [ border-color ]: 设置或检索对象边框颜色。
                border-left:
                    border-left-style:
                    border-left-color:
                    border-left-width:
                border-right:
                border-top:
                border-bottom:
        6. 鼠标光标属性
                cursor    设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。   
                属性值   auto   pointer  move  crosshair  wait  help   text  not-allowed
        7. 列表属性
                [ list-style-type ]: 设置或检索对象的列表项所使用的预设标记
                [ list-style-image ]: 设置或检索作为对象的列表项标记的图像
                [ list-style-position ]: 设置或检索作为对象的列表项标记如何根据文本排列
                list-style   综合写法
                list-style:[ list-style-image ] || [ list-style-position ] || [ list-style-type ]
                一般给一个列表中的列表项添加图片使用的是背景图片的方式
        8. 表格属性  width  height border.....
                1)table-layout  固定每列的宽度
                属性值
                    auto: 不固定
                    fixed: 固定
                2)border-collapse 设置或检索单元格的边框是否合并
                属性值
                    separate: 边框独立  默认值  不合并
                      collapse: 相邻边被合并  合并
                  3)border-spacing:单元格的边框与边框之间的距离
                    只有border-collapse的属性值是separate:的时候,border-spacing属性才能生效
                4)caption-side:top | right | bottom | left
                 设置或检索表格的caption标题在哪个方向显示
                5)empty-cells 当单元的内容为空是,是否显示边框
                  属性值有两个 show 默认值显示 hide 不显示
               

 

如果您需要转载,可以点击下方按钮可以进行复制粘贴;本站博客文章为原创,请转载时注明以下信息

张柏沛IT技术博客 > HTML+CSS基础(三) CSS的引入方式和CSS选择器

热门推荐
推荐新闻