css常用选择器,css属性集合及css3新增选择器

最新推荐文章于 2024-07-25 10:45:42 发布

你的长安有雪.

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量99

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_53934815/article/details/128252446

版权

css的书写形式

外部加载的形式（推荐使用）

<link rel="stylesheet" href="外部样式表URL地址">

2.内部样式（书写于HTML头部区域）

 <style>
        css样式
 </style>

3.行内样式（书写于HTML标签中）

<p style="css样式">我是段落</p>

css语法结构

选择器{属性：值；属性2：值；…}

css选择器

1.通配选择器 *
    * {margin: 0;padding: 0;}
    
2.标签选择器
    标签{width: 10px;height: 10px;}
    
3.类选择器（.）
    起类名：<p class="tag_01">哈哈哈</p>
    .tag_01{color:red;}
    
4.ID选择器（具有唯一性，优先级很高）（#）
    id="tag_02"
    #tag_02 {color: rgb(0, 0, 0)}
    
5.群组选择器
    li,td,.tag_01,#tag_02{
    font-size:16px;
    }
6.后代选择器
	table tr td{属性:值;}
	
7.子代选择器（父子级）
	tr>td{属性:值;}
	
8.相邻兄弟选择器（+）
	<div class="box">
        <div class="dv1"></div>
        <div class="dv2"></div>
    </div>
	.tag_01+.tag_02{属性:值;}
	
9.属性选择器（[]）  [属性] {属性:值;}
    img[title][id]{属性:值;}
    input[type="text"]{属性:值;}

一.字体属性

名称	值	说明
font-family	字体	修改文字字体
font-size	px / em	修改字体大小
font-style	normal(正常) / italic(倾斜)	字体风格
font-weight	normal(正常) / bold(加粗)	字体加粗

二.文本属性

名称	值	说明
letter-spacing	长度	文字间隔
word-spacing	长度	字母间隔，允许负值
text-decoration	underline(下划线) overline(上划线) line-through(删除线) none(无)	文本修饰
text-align	left(左对齐) right(右对齐) center(居中) justify(两端对齐)	对齐方式
text-indent	长度 / 百分比	文本缩进
line-height	长度 / 像素	行高

三.背景属性

名称	值	说明
background-color	英文单词 / rgb / 十六位进制数	设置背景颜色
background-image	图片URL	设置背景图片
background-repeat	repeat(平铺) repeat-x(横向平铺) repeat-y(纵向平铺) no-repeat(不平铺)	背景平铺
background-attachment	scroll(滚动) fixed(固定)	背景是否随滚动条滚动
background-position	top / bottom / center / left / right (方位单词，不考虑顺序) 写具体数字，有顺序，第一个值水平方向（向右为正）第二个值垂直方向（向下为正）	设置背景定位
简写	background:red 背景图平铺定位/尺寸

四.背景属性

名称	值	说明
border-color	英文单词 / rgb / 十六位进制数	设置边框颜色
border-width	像素	边框宽度
border-style	solid(实线) dashed(虚线) double(双实线) dotted(点线)	边框样式
简写方式	border: 1px solid #000	相当于1px的黑色实线边框

五.盒子模型

组成部分

(1) border (边框)
(2) content (文本区域)
(3) padding (内边距) padding-top / right /bottom /left
(4) margin (外边距) margin-top / right /bottom /left

2.Margin注意事项

a.相邻两个元素的垂直方向margin会取大值，水平方向正常
b.嵌套的元素，如果给子元素给了margin-top,那么父元素会发生margin塌陷
解决：父元素添加 overflow:hidden;

六.内联元素与块级元素

内联元素

    <a></a>
    <i></i>
    <u></u>
    <b></b>
    <span>文本标签</span>

块级元素

<body></body>
<div></div>
<h1></h1>~<h6></h6>
<ul></ul>
<li></li>
<ol></ol>
<p></p>
<table></table>
<tr></tr>
<td></td>

区别：
块级元素独占一行，可以设置宽高，内外边距
内联元素不能设置上下内外边距和宽高

七. css中的伪类

a:link{ } -------------未访问的链接
a:visited{ } ---------已访问的链接
a:hover{ } ----------鼠标移动到连接上
a:active{ } ----------选定的链接

八. 浮动


float	left / right

万能清除浮动法

<style>
  .clearfix::after {
        content: "";
        display: block;
        clear: both;
        overflow: hidden;
        height: 0;
    }
</style>

::after 与 content 一起使用，定义对象后的内容
::before 与 content 一起使用，定义对象前的内容

九.文本溢出

overflow属性

值	说明
visible	默认值
hidden	内容被修剪，其余内容不可见
scroll	内容被修剪，浏览器显示滚动条
auto	如果内容被修剪，则显示滚动条
inherit	规定应该从父元素继承overflow属性的值

white-space属性：设置如何处理元素内的空白

值	说明
normal	默认。空白会被浏览器忽略
pre	空白会被浏览器保留
nowrap	文本不会换行，会在同一行上继续，直到遇到`<br>` 标签为止
pre-wrap	保留空白符序列，但是正常地进行换行
per-line	合并空白符序列，但是保留换行符
inherit	规定应该从父元素继承white-space属性的值

text-overflow属性：规定当文本溢出包含元素时发生的事情

值	说明
clip	不显示省略号，而是简单的裁切
ellipsis	当对象内文本溢出时，显示省略标记

说明：要实现文本溢出时产生省略号的效果还需定义

1.容器宽度：width:value;(px,%都可以)
2.强制文本在一行内显示：white-space:nowrap;
3.溢出内容为隐藏：overflow:hidden;
4.显示省略号：text-overflow:ellipsis;

多行文本产生省略号

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;(第三行省略)
overflow:hidden;

十.元素隐藏方式

   1.display: none;       不占位置，真正意义的隐藏
   2.visibility: hidden;  占位置，真正意义的隐藏
   3.opacity: 0;          透明度为0，占位置
   4.rgba(0,0,255,0);     背景透明度为0，占位置
   5.height: 0; overflow:hidden; 不占位置
   6.transform: scale(0); 缩放，占位置
   7.transparent          透明色，占位置

十一.元素的定位设置

position属性

值	说明
static	默认值，没有定位
absolute	生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位元素的位置通过left,top,right,bottom规定
relative	生成相对定位的元素，相对于其正常位置定位
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位元素的位置通过left,top,right,bottom规定
sticky	粘性定位，离自己最近的且有滚动条的父元素进行定位