css

1519 views, 2024/10/28 update

css字体样式属性 **font-size:字号大小

**font-family:字体
    *可以设置多个字体,按顺序查找使用
    *字体可以用unicode表示,兼容性更好

**font-weight:字体粗细
    bold/700 :加粗
    normal/400 :不加粗

**font-style:字体风格
    normal:  正常字体
    italic: 倾斜字体

**font:综合设置字体样式
    选择器 {font: font-style font-weight font-size font-family}
        font-style font-weight 可以省略

css类选择器 class="orange" .orange { color="orange"} .是class #是id 是所有选择器 html页面内可以写多个class,中间用空格封开 后代选择器 (所有下层内的标签) body p{} 子代选择器 (仅下一层标签) body>p{} 兄弟选择器 (同级标签) head+body{}

伪类选择器
    :link      未访问的链接
    :visited   已访问的链接
    :hover     悬停的链接
    :active    点击不松开
        以上4个伪类顺序不能颠倒

伪元素选择器
    :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
    :nth-child(n)选择器匹配父元素中的第n个子元素。  
        :first-child    第一个元素
        :last-child     最后一个元素
        :nth-child(n)   第n个元素(从头开始)
        :nth-last-child(n)  第n个元素(从最后开始)
    参考资料:
        https://www.w3cschool.cn/cssref/sel-nth-of-type.html
目标伪类选择器
    :target  当前激活的标签样式,有且仅有一个激活标签

css颜色 1. color:red 2. color:#ff1133 16进制 3. color:rgb(255,0,0)

css文本样式 line-height 行间距 text-align 水平对齐方式 text-indent 首行缩进 letter-spacing 字间距 word-spacing 单词间距,仅对英语有效

css透明度 16进制的颜色最后添加2位透明度的值,最后两位透明度的取值范围[0~ff] body{ background-color: #ff000080; } rgba表示方式 a的取值范围[0~1] body{ background-color:rgba(255,0,0,0.5) }

透明背景:
    opacity    // 取值范围0~1

css文字阴影 text-shadow:{ 5px , 4px, 4px, rgba(0,0,0,0.5)} 水平阴影 垂直阴影 模糊距离 阴影颜色
前两个参数必须写,后两个参数可以省略

快速写标签 a*5+table 5个a标签 .red+table class="red"的div标签 #red+table id="red"的div标签 div+p+table div和p兄弟标签
div>p div的子标签p

css样式类型 内联样式
写在