0


WEB前端-css选择器-常用属性(属性完结)

WEB前端-css选择器-常用属性



常用选择器

1.通配选择器

给所有标签添加样式,*{css样式}

示意图

     多学一招:通常只是用来去掉所有代码的边距,因为每个浏览器的边距不同,有的8个像素,有的7个像素,所以干脆会全部去掉,重新设置,保证浏览器的每个边距都一致

2.后代选择器

选择元素里面的元素,外层元素和内层元素中间用空格隔开:外层 内层{css样式}

示意图

3.子元素选择器

选择元素的直接子元素,父和子之间用 > 隔开:父元素>子元素{css样式}

示意图

4.相邻元素选择器

选择相邻的元素,两个元素中间用 + 隔开:元素1 + 元素2{css样式

示意图

5.伪类

元素:link 正常连接时候的状态

元素:visited 点击以后的状态

元素:hover 当鼠标移动上去的状态-------重点、常用

元素:active 当鼠标按下去时候的状态

    注意:不是所有元素都支持这4种写法,超链接支持4种,工作中用的hover比较多,别的可以做个了解

伪类选择器和类选择器一起使用

示意图

伪对象选择器

first-letter:选择第一个字符

语法:元素:first-letter

示意图

first-line:选择第一行

语法:元素:first-lin

示意图

属性选择器

1.[属性名]

选择具有该属性的元素

示意图

2.[属性=值]

选择具有该属性且等于该值的元素

示意图

3.[属性~=值]

选择具有该属性,且值中包含该值的元素

示意图

4.[属性|=字符]

选择由连字符连接多个单词组成的属性值中的第一个单词

示意图

5.[属性*=值]

选择属性的值中包含当前的值的元素

示意图

css尺寸、行高属性

1.尺寸属性

a) 宽度

语法:width:值

取值:数字 + px/百分比/em -------------------------px代表像素,百分比代表浏览器宽度的百分比,em代表字符数

em:其相对于当前对象内文本的font-size

示意图

注意:1.div设置宽度为100%,其实和没设一样2.span标签设置宽度无效

b) 高度

语法:height:值

用法和宽度一样

注意:div不设高度,默认是0

2.行高

行高控制的是文字与文字之间的上下距离 (行距)

语法:line-height:值

示意图

     多学一招:如果将标签的高度和行高设置成一样,那么这个标签里面的文字可以在这个标签里面垂直居中,两者结合使用可以让单行文字在标签内部水平垂直居中,工作中经常用于让文字垂直居中(将行高设为盒子的高度)

font简写

    font: font-style font-weight font-size/line-height font-family 不建议修改顺序 并且不需要设置的属性可以不写 但是font-size和font-family必须指定,否则将不起作用
<style type="text/css">
        div{
            height:100px;
            border:1px solid #000;
            font:italic bolder 30px/100px "微软雅黑";
        }
    </style>
</head>
<body>
    <div>今天明天和后天</div>
</body>

效果图

标签: 前端 javascript html

本文转载自: https://blog.csdn.net/syh_SYH0321/article/details/127430965
版权归原作者 蒲竺 所有, 如有侵权,请联系我们删除。

“WEB前端-css选择器-常用属性(属性完结)”的评论:

还没有评论