前端学习 预习课程(css)

css:分外联,内联,行内样式

外联:<link type="text/css" href="" rel="stylesheet"></link>

内联:<style></style>

行内:<a style="font-size:14px"></a>


css注释手段:/*xxxxx*/

选择器

元素选择器    直接写元素名,如th,td,tr{}

类选择    .class

id选择    #id

title选择    *[title],所有具有title属性的元素赋值样式

后代选择器    元素+空格+元素名,例如:p li{} 

子选择器    元素>元素名,例如:p>li,p的子元素li元素,假如p和li之间有其他元素,不生效

兄弟选择器 元素+元素名,例如:p+li,紧邻p的li

伪类:

a:visit,访问过后链接的样子

a:link,为被访问的链接的样子

a:hover,鼠标移动到之后的样子

a:active,鼠标点击过后的样子


background-attachment:fixed

固定背景图片,不随页面滚动而滚动,之前个人的做法是叠加两个div,底下一个div的position:fixed

另外,把background所有属性包括:color,repeat,position,attachment组合,如:

background:url(".../images/xxx.png") no-repeat top right fixed


首字符缩进2字符:text-indent:2em

em:当前字符的倍数宽度


对齐方式,justify(两端对齐),例如text-align: justify;


text-transform 属性控制文本的大小写。

例如:text-transfrom:capitalize(首字母大写)


 text-decoration: underline overline line-through;控制文本修饰

underline:下划线

overline:上画线

line-through:删除线


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

white-space:pre-wrap(保留空白样式,但自动换行)


direction: rtl;控制文字的书写方向

rtl:从右往左


font-family: "微软雅黑","黑体";多个字体","号隔开,后面的为备选字体


font-style: italic;设置字体倾斜等样式


font-variant:small-caps 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。


text-shadow: 0px -1px 0px #f5f5f5,0px 3px 5px #666666,字体阴影(x轴,y轴,扩散量,颜色),多个阴影可以用“,”号隔开


outline: red solid 10px; 边框效果(颜色 样式 宽度)


list-style-image: url("xxxx.png");自定义列表项前面的原点图标


list-style-position: outside;定义列表中的文字是和小圆点对齐还是文字对齐

outside:文字对齐

inside:小圆点对齐


margin,当两个相邻的元素都有margin值时,取最大值,而不是合并margin值


padding,不允许使用负值


猜你喜欢

转载自blog.csdn.net/zy21131437/article/details/80789431
今日推荐