CSIC_716_20191227【CSS基础入门 part2】

选择器的优先级

当选择器相同时,按照就近原则产生相应的样式效果。

当选择器不同时,按照  行内css > id选择器 > 类选择器 > 标签选择器

也可以通过   ! important  忽视优先级,强制生效。

标签的分类可以分为块级标签和行内标签。

可以给块级标签设置大小length和width,行内标签不必设置,设置了也不会生效。

调节文本的颜色可以有三种方式

color: green;

color:#2b2b2b      #后面的数字可以配合qq获得

color: rgb(255,255,0)       三原色

color: rgba(255,255,255,0.5)     最后一个0.5表示透明度  

相关的属性设置

--------字体属性--------
font-famaliy :  字体样式,可以选择。
font-size:  16px  ,px是像素
font-weight:  bold 加粗  ,也可以设置具体的值100-900之间

--------文字属性--------
text-align:  left、right、center、justify(两端对齐)
text-decoration:none、underline、overline、line-through,通常用none去掉A标签的下划线。
text-indent:32px  首行缩进多少像素

--------背景属性--------
background-color:red  ;   背景的颜色
background-image:url(" 图片地址")  ;  图源
background-repeat:no-repeat、repeat-x、repeat-y ; 不重复、沿x重复、沿y重复
background-position:  left  top  / 或者/  100px  200px ; 第一个是左右,第二个是上下,可英文可数字
background-attachment:scroll(滚动)、fixed(固定)  背景图片要不要跟随页面进行滚动
上面四个可以简写成: background:left top url(" ") red no-repeat fixed


--------边框--------
border-width:3px;   边框的宽度3像素
border-style:none(无边框)、solid(实线)、dotted(点虚线)、dashed(方形虚线);
border-color:red ; 颜色红色
上面三个可以简写:border:3px solid red
border-radius:20px、或50%  ;指定半径或者比例实现圆角边框。

--------display属性--------
display:block; 独占一行,可设置大小
display: inline; 按一行显示,设置大小无效
display: inline-block; 同时具有块级可设置大小以及按行显示的特性
display:none;隐藏某个标签的内容,在页面布局上也不占位置

区别:visibility:hidden   隐藏某个标签内容,但是在页面布局上还占位

  

猜你喜欢

转载自www.cnblogs.com/csic716/p/12108794.html